堆栈内存溢出
  简体   繁体   English

如何在网页的其他所有元素之上创建div

[英]How to make a div on top of every other element of a web page

 原文  2018-03-21 17:32:05  7   4    javascript/ html/ css

问题描述

I've made a dropdown list with checkboxes from scratch since the project on which I am working on has to be supported by older version of IE. 我已经从头开始创建了一个带有复选框的下拉列表，因为我正在处理的项目必须由IE的较早版本支持。 And the result is pretty good except for one part. 除了一部分以外，结果还不错。 when I click on the drop down list every other element of the page gets lowered down. 当我单击下拉列表时，页面的其他所有元素都会降低。

The behaviour that I'm trying to achieve is the same of an element select where it will go on top of any other element of the page. 我试图实现的行为与元素选择相同，它将在页面的其他任何元素之上。 Is there a CSS property (or pure JS) that will let me do that. 是否有CSS属性（或纯JS）可以让我做到这一点。

Here is the code: 这是代码： 

 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>

4 个解决方案

解决方案1
 1 已采纳  2018-03-21 17:38:04

Use position:absolute for the checklist...it will remove the element from the flow of document resulting does not affect on other elements... 对清单使用position:absolute ...它将从文档流中删除该元素，从而不会影响其他元素...

Also use position:relative to the parent container .dropdown-check-list 还要使用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>

解决方案2
 1  2018-03-21 18:33:29

My humble 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>Hello World&nbsp;! Hello World&nbsp;! Hello World&nbsp;!</p>

Event delegation for "focus" and "blur" : quirksmode.org . “焦点”和“模糊”的事件委托： quirksmode.org 。

解决方案3
 0  2018-03-21 17:33:43

For the div you can use z-index: 2 and the other elements z-index: 1 对于div，您可以使用z-index：2和其他元素z-index：1

The highest value is in the front 最高值在前面

解决方案4
 0  2018-03-21 17:37:34

You can set position: absolute on items to achieve that: 您可以在items上设置position: absolute以实现以下目的： 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在不依赖页面中使用的结构/样式的情况下，在页面上的每个其他元素之上呈现元素？ - How to render an element on top of every other element on page without depending on the structure/styles used in the page? 如何使粘性div置于其他内容之上 - how to make a sticky div be on top of other content 如何使元素从网页的顶部跳到底部并回到顶部？ - How to make an element jump from top to the bottom of the web page and back to the top? 如何使div顶部成为其他div的底部 - How do I make a div top to be the bottom of other div Javascript：如何对页面中的每个元素进行数组化 - Javascript: How to make an array of every element in the page 如何使用jquery将div移动到元素的顶部，将另外两个移动到元素的底部 - How to use jquery to move a div to the top of a element and the other two to the bottom 如何使滚动条从每个页面的顶部开始 - How to make scroll bar start from the top in every page 如何使 div 元素固定直到它到达其他 div - How to make div element fixed until it reaches other div 如何以相同的背景颜色在 div 顶部制作元素？ - How to make an element on top of a div in the same background color? 如何使 div 覆盖每个 HTML 元素？ - How to make a div overlay every single HTML element?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM