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: 100px)来解决它，但这不是很实用，而且根本没有响应。

你要找的不是position: absolute；它是 float: left 和 float: right。将这些属性应用于子项并为父项提供 overflow: hidden(或任何最适合您的布局的清除 float 的方法)，它会工作得很好。