html - 具有固定父级的绝对定位元素上的 z-index

标签 html css css-position z-index

<分区>

为什么 z-index 属性不适用于具有绝对位置的元素,如果此元素的父元素位置固定? 我做的很简单example对于这种情况

HTML:

<div id='q1'>
  <div id='q2'></div>  
</div>

CSS:

#q1 {
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: red;
  z-index: 0;
}

#q2 {
  position: absolute;
  top: 80%;
  border: 2px solid black;
  width: 100px;
  height: 30px;
  background-color: green;
  z-index: -1;
}

最佳答案

不能那样做,因为 z-index 是相对于同一堆栈的元素的,在您的情况下,您希望子项的 z-index 低于父项的 z-index。

顺便说一下,如果你不让#q2 成为#q1 的 child ,它会像 charm 一样工作。

希望对你有帮助

关于html - 具有固定父级的绝对定位元素上的 z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46938250/

上一篇:jquery - 如何设置响应移动的html表格

下一篇:css - Bootstrap Glyphicon,如何改变权重?

相关文章:

html - 下拉菜单未出现

javascript - 使用 document.createElement 创建嵌套标签

css - 如何 "Always"显示仅在悬停时可见的元素?

javascript - 使用 parallax.min.js 将空白添加到视差 div

jquery - Webkit CSS 绝对定位错误?

html - 如何将图像完全固定在一个相对点 css 上

html - 如何固定左列和右列以及中间部分水平滚动?

javascript - 网页上的两个视频

jquery - 使用 jQuery.mobile 在移动布局中的某些文本字段上不需要继承 CSS(或重置它)

html - 将绝对定位元素与父元素的中间对齐