Question

当我的拖放事件开始时，我需要覆盖一个子div以覆盖它的父div，但是我无法使用z-index将子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%; and width: 100%;来确保子元素与父元素的尺寸匹配的原因。

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

height: 100%; and width: 100%;的替代方法是使用top: 0; right: 0; bottom: 0; left: 0;。这会将子元素拉伸到父元素的边缘。

在父级顶部叠加div，大小相同

1 个答案: