Steps for creating a div that appears on top of all other elements on a webpage

Question

Steps for creating a div that appears on top of all other elements on a webpage

I have created a custom dropdown list with checkboxes from scratch because the project I am working on needs to be compatible with older versions of IE. Overall, the result is good but there is one issue - when I click on the drop down list, every other element on the page shifts downwards.

What I want to achieve is for the dropdown list to behave like a select element where it appears on top of all other elements on the page. Is there a CSS property or pure JavaScript solution that can help me achieve this?

Here is the code snippet:

var checkList = document.getElementById('list1');
var items = document.getElementById('items');
document.getElementById('anchor').onclick = function(evt) {
  if (items.className.indexOf("visible") !== -1) {
    items.className = "";
    items.style.display = "none";
  } else {
    items.className = " visible";
    items.style.display = "block";
  }


}

.dropdown-check-list {
  display: inline-block;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}

.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}

.dropdown-check-list ul {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}

.dropdown-check-list ul li {
  list-style: none;
}

<body>
  <div id="list1" class="dropdown-check-list" tabindex="100">
    <span id="anchor" class="anchor">Type</span>
    <ul id="items" class="items">
      <li><input type="checkbox" />Choice 3</li>
      <li><input type="checkbox" />Choice 2</li>
      <li><input type="checkbox" />Choice 1</li>
    </ul>
  </div>
  <h1>
    this shou
  </h1>
</body>

javascript html css

Answer 1

Answer №1

Employ the use of position:absolute for the checklist to remove it from the document flow, ensuring it does not affect other elements...

Additionally, apply position:relative to the parent container .dropdown-check-list

const checkList = document.getElementById('list1');
const items = document.getElementById('items');
document.getElementById('anchor').onclick = function(evt) {
  if (items.className.indexOf("visible") !== -1) {
    items.className = "";
    items.style.display = "none";
  } else {
    items.className = " visible";
    items.style.display = "block";
  }


}

.dropdown-check-list {
  display: inline-block;
  position: relative;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}

.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}

.dropdown-check-list ul {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
  position: absolute;
  left: 0;
  right: 0;
  background: #fff;
  top: 100%;
}

.dropdown-check-list ul li {
  list-style: none;
}

<body>
  <div id="list1" class="dropdown-check-list" tabindex="100">
    <span id="anchor" class="anchor">Type</span>
    <ul id="items" class="items">
      <li><input type="checkbox" />Choice 3</li>
      <li><input type="checkbox" />Choice 2</li>
      <li><input type="checkbox" />Choice 1</li>
    </ul>
  </div>
  <h1>
    this shou
  </h1>
</body>

Answer 2

Employ the use of position:absolute for the checklist to remove it from the document flow, ensuring it does not affect other elements...

Additionally, apply position:relative to the parent container .dropdown-check-list

const checkList = document.getElementById('list1');
const items = document.getElementById('items');
document.getElementById('anchor').onclick = function(evt) {
  if (items.className.indexOf("visible") !== -1) {
    items.className = "";
    items.style.display = "none";
  } else {
    items.className = " visible";
    items.style.display = "block";
  }


}

.dropdown-check-list {
  display: inline-block;
  position: relative;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}

.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}

.dropdown-check-list ul {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
  position: absolute;
  left: 0;
  right: 0;
  background: #fff;
  top: 100%;
}

.dropdown-check-list ul li {
  list-style: none;
}

<body>
  <div id="list1" class="dropdown-check-list" tabindex="100">
    <span id="anchor" class="anchor">Type</span>
    <ul id="items" class="items">
      <li><input type="checkbox" />Choice 3</li>
      <li><input type="checkbox" />Choice 2</li>
      <li><input type="checkbox" />Choice 1</li>
    </ul>
  </div>
  <h1>
    this shou
  </h1>
</body>

Answer 3

Answer №2

Here is my modest contribution:

var addButton = document.getElementById("add");
addButton.onclick = addDropdown;
for (var i = 0; i < 8; i++) {
  addDropdown.call(addButton);
}

document.addEventListener("click", function (ev) {
  var el = ev.target;
  if (hasClass(el, "dropdown")) {
    let list = closestDropdownList(el);
    if (hasClass(el, "active")) {
      list.style.display = "none";
      removeClass(el, "active");
    } else {
      var t = el.offsetTop;
      var l = el.offsetLeft;
      var h = el.offsetHeight;
      list.style.left = l + "px";
      list.style.top = t + h + "px";
      list.style.display = "block";
      addClass(el, "active");
    }
  }
});

document.addEventListener("blur", function (ev) {
  var el = ev.target;
  if (hasClass(el, "dropdown")) {
    let list = closestDropdownList(el);
    list.style.display = "none";
    removeClass(el, "active");
  }
}, true);

function addDropdown () {
  var els = [];
  var el = this;
  var parent = this.parentNode;
  while (!hasClass(el, "dropdown")) {
    el = el.previousSibling;
    els.push(el.cloneNode(true));
  }
  while (els.length > 0) {
    parent.insertBefore(els.pop(), this);
  }
}

function hasClass (el, name) {
  if (!el.getAttribute) {
    return false;
  } else {
    var attr = el.getAttribute("class");
    attr = " " + attr + " ";
    name = " " + name + " ";
    return attr.indexOf(name) >= 0;
  }
}

function removeClass (el, name) {
  var attr = el.getAttribute("class");
  attr = " " + attr + " ";
  name = " " + name + " ";
  attr = attr.replace(name, " ");
  attr = attr.slice(1, -1);
  el.setAttribute("class", attr);
}

function addClass (el, name) {
  var attr = el.getAttribute("class");
  attr += " " + name;
  el.setAttribute("class", attr);
}

function closestFollowing (el, predicate) {
  while ((el = el.nextSibling) && !predicate(el));
  return el;
}

function closestDropdownList (el) {
  return closestFollowing(el, function (sibling) {
    return hasClass(sibling, "dropdown-list");
  });
}

.dropdown {
  margin-bottom: .5em;
}
.dropdown:after {
  content: "";
  margin-left: .4em;
  display: inline-block;
  vertical-align: middle;
  border-top: 5px solid black;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 0px;
}
.dropdown-list {
  border: 1px solid black;
  position: absolute;
  background: white;
  display: none;
  padding: .2em;
  margin: 0;
}
.dropdown-list li {
  list-style: none;
  cursor: pointer;
  padding: .25em;
}
.dropdown-list li:hover {
  background: #ddd;
}

<button class="dropdown">Choose</button>
<ul class="dropdown-list">
  <li>Option A</li>
  <li>Option B</li>
  <li>Option C</li>
</ul>
<button id="add">Add dropdown</button>
<p>Greetings World! Greetings World! Greetings World!</p>

Utilizing event delegation for "focus" and "blur": quirksmode.org.

Answer 4

Here is my modest contribution:

var addButton = document.getElementById("add");
addButton.onclick = addDropdown;
for (var i = 0; i < 8; i++) {
  addDropdown.call(addButton);
}

document.addEventListener("click", function (ev) {
  var el = ev.target;
  if (hasClass(el, "dropdown")) {
    let list = closestDropdownList(el);
    if (hasClass(el, "active")) {
      list.style.display = "none";
      removeClass(el, "active");
    } else {
      var t = el.offsetTop;
      var l = el.offsetLeft;
      var h = el.offsetHeight;
      list.style.left = l + "px";
      list.style.top = t + h + "px";
      list.style.display = "block";
      addClass(el, "active");
    }
  }
});

document.addEventListener("blur", function (ev) {
  var el = ev.target;
  if (hasClass(el, "dropdown")) {
    let list = closestDropdownList(el);
    list.style.display = "none";
    removeClass(el, "active");
  }
}, true);

function addDropdown () {
  var els = [];
  var el = this;
  var parent = this.parentNode;
  while (!hasClass(el, "dropdown")) {
    el = el.previousSibling;
    els.push(el.cloneNode(true));
  }
  while (els.length > 0) {
    parent.insertBefore(els.pop(), this);
  }
}

function hasClass (el, name) {
  if (!el.getAttribute) {
    return false;
  } else {
    var attr = el.getAttribute("class");
    attr = " " + attr + " ";
    name = " " + name + " ";
    return attr.indexOf(name) >= 0;
  }
}

function removeClass (el, name) {
  var attr = el.getAttribute("class");
  attr = " " + attr + " ";
  name = " " + name + " ";
  attr = attr.replace(name, " ");
  attr = attr.slice(1, -1);
  el.setAttribute("class", attr);
}

function addClass (el, name) {
  var attr = el.getAttribute("class");
  attr += " " + name;
  el.setAttribute("class", attr);
}

function closestFollowing (el, predicate) {
  while ((el = el.nextSibling) && !predicate(el));
  return el;
}

function closestDropdownList (el) {
  return closestFollowing(el, function (sibling) {
    return hasClass(sibling, "dropdown-list");
  });
}

.dropdown {
  margin-bottom: .5em;
}
.dropdown:after {
  content: "";
  margin-left: .4em;
  display: inline-block;
  vertical-align: middle;
  border-top: 5px solid black;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 0px;
}
.dropdown-list {
  border: 1px solid black;
  position: absolute;
  background: white;
  display: none;
  padding: .2em;
  margin: 0;
}
.dropdown-list li {
  list-style: none;
  cursor: pointer;
  padding: .25em;
}
.dropdown-list li:hover {
  background: #ddd;
}

<button class="dropdown">Choose</button>
<ul class="dropdown-list">
  <li>Option A</li>
  <li>Option B</li>
  <li>Option C</li>
</ul>
<button id="add">Add dropdown</button>
<p>Greetings World! Greetings World! Greetings World!</p>

Utilizing event delegation for "focus" and "blur": quirksmode.org.

Answer 5

Answer №3

To make the div stand out, set its z-index to 2, while the rest of the elements should have a z-index of 1.

Remember, the higher value takes precedence and appears in the front.

Answer 6

To make the div stand out, set its z-index to 2, while the rest of the elements should have a z-index of 1.

Remember, the higher value takes precedence and appears in the front.

Answer 7

Answer №4

To obtain this effect, you can apply the CSS property position: absolute to the items:

.items {
    position: absolute;
    background: #ffffff;
}

Answer 8

To obtain this effect, you can apply the CSS property position: absolute to the items:

.items {
    position: absolute;
    background: #ffffff;
}

Steps for creating a div that appears on top of all other elements on a webpage

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Exploring the world of interconnected meshes in three.js

JavaScript and inverted brackets

Performing a Node.js PATCH request that includes the If-Match header

Displaying live data from an XMLHttpRequest in a Vue component in real-time

Why isn't httpUploadProgress functioning correctly with Buffer data?

Parsing error: Unexpected character found at line 238, column 16. Consider using a loader suitable for this file format

Tips for creating row grouping in React JS

Searching for data between two specific dates can be achieved in Laravel Vue by utilizing the filter

Storing a chosen avatar in a database: A step-by-step guide

jquery:Error: string literal not properly terminated

What is the best way to show a list when hovering the mouse over a

Symfony2 requires clarification and direction when it comes to managing quantities in a shopping cart

Issue with sorting dates when there is an extra digit in the budget, for example: "02/13/2017 0"

Dealing with 401 Errors: Navigating Redirects using Vue.js and

If you encounter an unrecognized operator in Javascript, make sure to handle this error and return

Maintaining and refreshing the content in an input field

Triggering multiple functions by clicking on the Icon

"Discover how simple tips can enhance your website's user experience by enabling

Create a variety of documents and bundle them into a zip file for easy

What is the reason for the gap between the bottom row and the one above it?