148

我打开了控制台（chrome\firefox）并运行了以下几行：

$("body").append("<div id=\"popupFrame\" style=\"width:100%;height:100%;background-color:black;opacity:0.5;position:absolute;top:0;left:0;z-index:1;\" />");
$("body").append("<div id=\"popupContent\" style=\"width:200px;height:200px;z-index:1000;background-color:white;\" >dasdasdsadasdasdasdasdasd</div>");

#popupContent 应该是最重要的，但它受#popupFrame 不透明度的影响。

内容不包含在#popupFrame 中，这很奇怪。

目标是创建类似 Firefox 的警报框

4

7 回答 7

280

第二个 div 是position: static（默认），因此 z-index 不适用于它。

您需要定位（将 position 属性设置为除 之外的任何东西，在这种情况下static您可能想要relative）任何您想要给予的东西z-index。

于 2013-01-23T15:50:06.083 回答
64

老问题，但这个答案可能对某人有所帮助。

如果您试图在容器边界之外显示容器的内容，请确保它没有overflow:hidden，否则它之外的任何内容都会被截断。

于 2018-02-15T15:33:57.937 回答
53

不透明度会改变 z-index 的上下文，静态定位也是如此。要么为没有它的元素添加不透明度，要么从有它的元素中删除它。您还必须使两个元素都静态定位或指定相对或绝对位置。以下是有关上下文的一些背景：http: //philipwalton.com/articles/what-no-one-told-you-about-z-index/

于 2013-01-23T15:49:59.657 回答
40

z-index仅适用于已被明确定位的元素。添加position:relative到#popupContent，你应该很高兴。

于 2013-01-23T15:51:26.430 回答
2

我在使用时position: absolute;经常遇到这个问题，我position: relative在子元素中使用时遇到了这个问题。不需要改成position: absolute，relative只需要在子元素中加入就可以了，看下面两个例子：

let toggle = document.getElementById('toggle')

toggle.addEventListener("click", () => {
 toggle.classList.toggle('change');
})
.container {
  width: 60px;
  height: 22px;
  background: #333;
  border-radius: 20px;
  position: relative;
  cursor: pointer;

}

.change .slide {
  transform: translateX(33px);
}

.slide {
  transition: 0.5s;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 20px;
  margin: 2px 2px;
  z-index: 100;
}

.dot {
  width: 10px;
  height: 16px;
  background: red;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
}
<div class="container" id="toggle">
  <div class="slide"></div>
  <div class="dot"></div>
</div>

这是使用相对位置固定的方法：

let toggle = document.getElementById('toggle')

toggle.addEventListener("click", () => {
 toggle.classList.toggle('change');
})
.container {
  width: 60px;
  height: 22px;
  background: #333;
  border-radius: 20px;
  position: relative;
  cursor: pointer;

}

.change .slide {
  transform: translateX(33px);
}

.slide {
  transition: 0.5s;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 20px;
  margin: 2px 2px;
  z-index: 100;
  
  // Just add position relative;
  position: relative;
}

.dot {
  width: 10px;
  height: 16px;
  background: red;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
}
<div class="container" id="toggle">
  <div class="slide"></div>
  <div class="dot"></div>
</div>

沙箱在这里

于 2020-07-22T04:27:17.553 回答
0

我遇到了同样的问题，我试图通过in a with aappending的元素来解决它，我的问题是快速拨号（reactjs + material），所以我不知道它是否适用于所有情况。absolute positiondivsticky position

于 2021-08-30T01:49:12.740 回答
0

可能为时已晚，但它可以作为替代方法的首选。以绝对位置显示元素的分层顺序取决于元素插入父元素的顺序。换句话说，可以不使用 z-index，而是通过添加 $(parent).prepend(me) 将其发送到后面，并通过添加 $(parent) 将其带到前面。附加（我）。

function BringToFront(){
  $("#parent").append($("#me"));
}

function SendToBack(){
  $("#parent").prepend($("#me"));
}
#mySister{
position:absolute;
left:25px;
top:25px;
width:100px;
height:100px;
background-color: red;
}

#me{
position:absolute;
left:50px;
top:50px;
width:100px;
height:100px;
background-color: yellow;
}

#myBrother{
position:absolute;
left:75px;
top:75px;
width:100px;
height:100px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="parent">

  <div id="mySister">&nbsp;</div>

  <div id="me">Hello! this is me!</div>
  
  <div id="myBrother">&nbsp;</div>

</div>

<button type="button" onclick="BringToFront()">Bring to front</button>
<button type="button" onclick="SendToBack()">Send to back</button>

于 2022-01-21T09:35:59.407 回答