[英]How to make a div on top of every other element of a web page
我已经从头开始创建了一个带有复选框的下拉列表，因为我正在处理的项目必须由IE的较早版本支持。 除了一部分以外，结果还不错。 当我单击下拉列表时，页面的其他所有元素都会降低。
我试图实现的行为与元素选择相同，它将在页面的其他任何元素之上。 是否有CSS属性（或纯JS）可以让我做到这一点。
这是代码：
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>
对清单使用position:absolute ...它将从文档流中删除该元素，从而不会影响其他元素...
还要使用position:relative对于父容器.dropdown-check-list
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; 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>
我的不起眼的贡献：
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>Hello World ! Hello World ! Hello World !</p>
“焦点”和“模糊”的事件委托： quirksmode.org 。
对于div，您可以使用z-index：2和其他元素z-index：1
最高值在前面
您可以在items上设置position: absolute以实现以下目的：
.items {
position: absolute;
background: #ffffff;
}
如何在不依赖页面中使用的结构/样式的情况下，在页面上的每个其他元素之上呈现元素？
[英]How to render an element on top of every other element on page without depending on the structure/styles used in the page?
如何使元素从网页的顶部跳到底部并回到顶部？
[英]How to make an element jump from top to the bottom of the web page and back to the top?
如何使用jquery将div移动到元素的顶部，将另外两个移动到元素的底部
[英]How to use jquery to move a div to the top of a element and the other two to the bottom
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.