html - 绝对位置 div 在父 div 中消失

Question

我正在尝试放置简单的 div 并排列它们，但是即使我使用具有相对定位的父 div 和具有绝对定位的子 div，我的子 div 也会从父 div 中消失。我想要 connect_us_01 和注册 div 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;
}