css - 如何让父元素出现在子元素之上

标签 css z-index

<分区>

我有两个嵌套的 CSS 元素。我需要让父级位于子元素的顶部,即在 z 轴上方。仅仅设置 z-index 是不够的。

我无法在子项上设置负 z-index,这会将其设置在我实际页面上的页面容器下方。这是唯一的方法吗?

http://jsbin.com/ovafo/edit

.parent {
  position:  relative;
  width: 750px;
  height: 7150px;
  background: red;
  border: solid 1px #000;
  z-index: 1;
}
.child {
  position: absolute;
  background-color: blue;
  z-index: 0;
  color: white;
  top: 0;
}
.wrapper
{
  position: relative;
  background: green;
  z-index: 10;
}
<div class="wrapper">
  <div class="parent">
    parent parent
    <div class="child">
      child child child
    </div>
  </div>
</div>

最佳答案

为子级设置一个负的z-index,并移除父级的设置。

.parent {
    position: relative;
    width: 350px;
    height: 150px;
    background: red;
    border: solid 1px #000;
}
.parent2 {
    position: relative;
    width: 350px;
    height: 40px;
    background: red;
    border: solid 1px #000;
}
.child {
    position: relative;
    background-color: blue;
    height: 200px;
}
.wrapper {
    position: relative;
    background: green;
    height: 350px;
}
<div class="wrapper">
    <div class="parent">parent 1 parent 1
        <div class="child">child child child</div>
    </div>
    <div class="parent2">parent 2 parent 2
    </div>
</div>

https://jsfiddle.net/uov5h84f/

关于css - 如何让父元素出现在子元素之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1806421/

相关文章:

html - 背景悬停颜色和溢出的导航元素 z-index 问题

html - CSS Z-Index 堆叠上下文拼图

html - 如何在 CSS 中重叠附加的 li 元素

jquery - bootstrap 4 文件输入不显示文件名

html - 使用 materialize css .col div 来创建(不应遵循行线)以制作如下图所示的内容

html - CSS:类似于将元素的框阴影放置在与元素不同的 z-index 处的效果

jquery - firefox 上的 z-index - Internet Explorer 不工作。 Bootstrap 模态

html - 如何使用 CSS 类和 ID 选择器

javascript - 使固定侧边栏从页面底部滚动 290px?

html - 如何为html中的所有粗体文本提供不同的字体?