我已经从头开始制作一个带有复选框的下拉列表，因为我正在处理的项目必须得到旧版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>
答案 0 :(得分：1)
使用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>
答案 1 :(得分：1)
我的谦逊贡献：
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。
答案 2 :(得分：0)
对于div，您可以使用z-index：2 和其他元素z-index：1
最高值位于前面
答案 3 :(得分：0)
您可以在position: absolute上设置items来实现这一目标：
.items {
position: absolute;
background: #ffffff;
}