时间戳

首页 > 解决方案 > 将固定子级定位在下一个元素的顶部，z-index 相对

html - 将固定子级定位在下一个元素的顶部，z-index 相对

问题描述

我需要将父级以下的子级设置为相对元素之上的博，可以这样做吗？

<div class="parent fixed">
  <div class="child absolute">
</div>
<div class="next-element relative">

现在的CSS：

.parent {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.child {
    position: absolute;
}
.next-element {
    z-index: 1;
    position: relative;
}

可能吗 ？

标签： htmlcss

解决方案

我不完全确定我理解了这个问题，但是如果父项（以及它的子项）的 z-index 大于下一项的 z-index，那么子项将位于下一个元素的“顶部”。

这是一个简单的片段，其中包含给定尺寸的元素，以便可以看到它们，并且给定下一个元素 z-index -1 只是为了使其小于第一个元素（其中 z-index 默认为 0）。

.parent {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: cyan;
}

.child {
  position: absolute;
  width: 20%;
  height: 20%;
  background-color: lime;
}

.next-element {
  z-index: -1;
  position: relative;
  background-color: pink;
  width: 30%;
  height: 30%;
}
<div class="parent fixed">
  <div class="child absolute">
  </div>
  <div class="next-element relative">

推荐阅读