html - 将相同大小的 div 叠加在父级之上

Question

当我的拖放事件开始时，我需要覆盖一个子 div 以覆盖它的父 div，但我无法使用 z-index 使子 div 位于父 div 之上。

这是我的 HTML:

<div class="some-element">
  <div class="parent-div">
    <div class="child-div">
      <p>This should be over the parent</p>
    </div>
    <h1>Some text lorem ipsum</h1>
  </div>

  <div class="another-div">
    <p>lorem ipsum</p>
  </div>
</div>

这是我的 CSS

html, body {
  height: 100%;
  width: 100%;
}

.some-element {
  background-color: blue;
  width: 100%;
}

.parent-div {
  background-color: red;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}

.child-div {
  background-color: green;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 999;
}

这是一个演示我的问题的 CodePen:https://codepen.io/leofontes/pen/LkgJpo

我认为通过使用 z-index 和相对位置我可以实现我想要的，但它似乎并没有堆叠在父级之上。知道发生了什么事吗？

Answer 1

对于 .child-div 将定位更改为 absolute。

.child-div {
  background-color: green;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 999;
}

html,
body {
  height: 100%;
  width: 100%;
}
.some-element {
  background-color: blue;
  width: 100%;
}
.parent-div {
  background-color: red;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}
.child-div {
  background-color: green;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 999;
}

<div class="some-element">
  <div class="parent-div">
    <div class="child-div">
      <p>This should be over the parent</p>
    </div>
    <h1>Some text lorem ipsum</h1>
  </div>

  <div class="another-div">
    <p>lorem ipsum</p>
  </div>
</div>

相对定位会将某物从其当前位置相对移动，但会继续占用其原始位置的空间。看看下面的例子。当我使用相对定位移动 "text" 段时，请注意文本行不会折叠到 "Some" 和 "之间的单个空格在这里。”

span {
  position: relative;
  top: 20px;
  left: 20px;
  background-color: yellow;
}

<p>
  Some <span>text</span> here.
</p>

当你将一个元素设置为绝对定位时，你就把它从正常的文档流中移除了。这意味着就其他非绝对定位元素而言，它们不会占用空间。这就是为什么你需要使用 height: 100%;和 width: 100%; 以确保在使用绝对定位时子元素与父元素的尺寸相匹配。

默认情况下，填充将添加到 100% 尺寸。要防止这种情况，请使用 box-sizing: border-box;。

height: 100% 的替代方法；而 width: 100%; 就是使用 top: 0;右:0；底部:0；左:0；。这会将子元素拉伸(stretch)到父元素的边缘。