子div绝对定位，父元素高度不起作用

Question

父级div高度不起作用。

包裹高度无效。我需要两个子div都是绝对定位的，并且我需要一些CSS技巧来实现。不需要jQuery。

有人能帮我吗？

<div class="wrap">
    <div class="clild"></div>
    <div class="clild2"></div>
</div>


<style>
.wrap{
    position:relative;
    display:block;
    width:600px;
    margin:0 auto;
}
.clild{
    position:absolute;
    width:450px;
    height:200px;
    background:#069;
}
.clild2{
    position:absolute;
    width:350px;
    height:300px;
    background:#096;
}
</style>

- Dishan TD

---

你的包裹没有高度。 - DaniP

Answer 1

绝对定位的元素不再参与布局，它们独立成为一个布局上下文。因此它们不占据父元素的空间。

如果您希望父元素具有高度，则需要指定一个高度值。

- Diodeus - James MacFarlane

---

谢谢你的回答 :) - Dishan TD

Answer 2

您的父级

没有高度。请将.wrap类样式替换为以下样式：

   .wrap{
        position:relative;
        display:block;
        width : 600px;
        height:500px;
        background-color:red;
        margin:0 auto; 
  }

- jitender