覆盖父区顶部的div，大小相同 [英] Overlay div on top of parent with same size

问题描述

当我的拖放事件启动时，我需要覆盖子div以覆盖它的父div，但我无法使用z-index将子div放在父代的顶部。

这是我的HTML：

 < div class =一些元素> 
< div class =parent-div> 
< div class =child-div> 
< p>这应该超过父母< / p> 
< / div> 
< h1>一些文字信息< / h1> 
< / div> 
 
< div class =another-div> 
< p> lorem ipsum< / p> 
< / div> 
< / div> 
  

这里是我的CSS

  html，body {
 height：100％; 
宽度：100％; 
} 
 
 .some-element {
 background-color：blue; 
宽度：100％; 
} 
 
 .parent-div {
 background-color：red; 
身高：100％; 
职位：亲属; 
宽度：100％; 
 z-index：1; 
} 
 
 .child-div {
 background-color：green; 
身高：100％; 
职位：亲属; 
宽度：100％; 
 z-index：999; 
 
 $ / code> 

下面是一个CodePen，演示了我的问题： https://codepen.io/leofontes/pen/LkgJpo

我认为通过使用z-index和相对位置我可以实现我想要的，但它似乎并不堆叠在父级之上。任何想法是怎么回事？

解决方案

.child-div 将定位改为绝对。

  .child-div {
 background-color：green; 
身高：100％; 
位置：绝对; 
宽度：100％; 
 z-index：999; 
} 
  

<覆盖> html，body {height：100％; width：100％;}。some-element {background-color：blue; width：100％;}。parent-div {background-color：red;身高：100％;位置：相对;宽度：100％; z-index：1;}。child-div {background-color：green;身高：100％;位置：绝对;宽度：100％; z-index：999;}

< div class = 一些元素> < div class =parent-div> < div class =child-div> < p>这应该超过父母< / p> < / DIV> < h1>一些文字消息< / h1> < / DIV> < div class =another-div> < p> lorem ipsum< / p> < / div>< / div>

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

span {position ：亲戚; top：20px; left：20px; background-color：yellow;}

< p>一些< span>文字< / span> < / p>





当您将元素设置为绝对定位你把它从正常的文件流中拿出来。这意味着就其他非绝对定位元素而言，它们不会占用太多空间。这就是为什么你需要使用 height：100％;和width：100％; 确保子元素在使用绝对定位时与父元素的尺寸匹配。

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

身高：100％;和宽度：100％; 是使用 top：0;正确：0;底部：0; left：0; 。这会将子元素拉伸到父元素的边缘。

I need to overlay a child div to cover it's parent div when my drag and drop event starts, but I can't get the child div to be on top of the parent using z-index.

Here is my 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>

And here is my 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;
}

Here is a CodePen demonstrating my issue: https://codepen.io/leofontes/pen/LkgJpo

I thought by using z-index and position relative I would be able to achieve what I wanted, but it doesn't seem to stack on top of the parent. Any idea on what is going on?

解决方案

For .child-div change the positioning to 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>

Relative positioning will move something relative from it's current location but continue to take up space in it's original location. Take a look at the example below. When I use relative positioning to move the "text" segment, notice the line of text doesn't collapse down to a single space between "Some" and "here."

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

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

When you set an element to absolute positioning you take it out of the normal document flow. Meaning they don't take up space as far as other non absolute positioned elements are concerned. This is why you need to use height: 100%; and width: 100%; to make sure the child element matches the dimensions of the parent when using absolute positioning.

By default padding will add to the 100% dimensions. To prevent this use box-sizing: border-box;.

An alternative to height: 100%; and width: 100%; is to use top: 0; right: 0; bottom: 0; left: 0;. That will stretch the child element to the edges of the parent element.

这篇关于覆盖父区顶部的div，大小相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！