Question

我正在尝试放置简单的div并安排它们，但我的孩子div从父div中消失，即使我使用父div与亲戚和子div与绝对定位。我想要connect_us_01和registeration divs insideheader_block1。我正致力于响应式网页设计。非常感谢。

JSFiddle

<div id="header">
   <div id="header_block1">
       <div id ="registeration">reg</div>
       <div id ="connect_us_01">social media</div>
   </div>
   <div id="header_block2">
       <div id="crown_logo">logo</div>
       <div id="nav">navigation</div>
       <div class="contact_No_01">020324234233</div>
   </div>
</div>

css

#header {
   position: relative;
   width: 100%;
   background-color: #ff6a00;
}
#header_block1 {
   position: relative;
   margin: 0 auto;
   width: 90%;
   background-color: pink;
}

#header_block2 {
   margin: 0 auto;
   width: 90%;
   position: relative;
   background-color: aqua;
}

/*----social media & connect us block*/
#connect_us_01 {
   position: absolute;
   width: 300px;
   height: 50px;
   right: 0;
   background-color: blue;
}
#registeration {
   position: absolute;
   left: 1px;
   width: 200px;
   height: 50px;
   background-color: brown;
}

Answer 1

带有position: absolute的元素将从内容流中取出，这意味着它们没有固有的height。由于孩子没有height，父母也没有height，使孩子看不见。您可以通过为父级提供静态height（例如，height: 100px）来解决此问题，但这不是很实用且根本没有响应。

您要找的不是position: absolute;它是float: left和float: right。将这些属性应用于子项并给父overflow: hidden（或任何清除浮动的方法最适合您的布局），它将正常工作。

Answer 2

要显示您引用的阻止，只需添加#header_block1 height参数。

#header_block1  {
    position: relative;
    margin: 0 auto;
    width: 90%;
    height: 50px;
    background-color: pink;
}

绝对位置div在父div中消失

css

2 个答案: