jquery - 当内部 div 具有绝对位置时，div 的高度会降低

Question

我很难表述这个问题。我有一个 <header>其中有一个绝对定位的 div。问题是，由于它是绝对定位，下一个元素会在它下面。我希望你明白我的意思。我创建了一个 jsfiddle复制问题。

我的问题是，如何清除高度以使下一个元素不会位于绝对定位的 div 下方？这是问题的屏幕截图..

而且，这是我尝试过的 HTML 和 CSS。对此的任何帮助表示赞赏。

.site-header{
  position: relative;
  width:100%;
  height:auto;
  display:block;
  clear:both;
}
.site-header::after{
  content:"";
  height:1px;
  display:block;
  width:100%;
  clear:both;
}
.top-nav{
  background: #222222;
  padding:10px;
  display:block;
}
.main-nav-wrapper{
  position:absolute;
  background:rgba(0,0,0,.8);
  padding:40px 0;
  height:20px;
  width:100%;
  clear:both;
}

<header class="site-header">
  <nav class="top-nav">
  
  </nav>
  <div class="main-nav-wrapper">
    <nav class="main-nav"></nav>
  </div>
</header>
<section class="content">
  <h1>SECTION HEADING</h1>
  <p>
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tortor ante, dictum sed volutpat sit amet, accumsan at urna. Vestibulum congue, nulla a mollis dapibus, ex ex iaculis velit, vel lacinia elit justo at erat. Nulla at rutrum ipsum. Integer et tortor vitae ligula porttitor feugiat. Quisque quis nulla in tortor eleifend aliquet. Nunc nec dui nisl. Integer ultricies ullamcorper nisl, ut imperdiet augue luctus id. Proin lobortis non nibh ut accumsan. Sed mi ligula, suscipit non commodo vitae, facilisis at sapien. Praesent luctus arcu tincidunt felis consectetur volutpat. Duis tellus risus, auctor elementum bibendum at, varius vel massa. Etiam tristique sit amet nisi a vestibulum. Aenean mollis suscipit nunc. Vestibulum volutpat diam ut metus interdum cursus. Donec vitae arcu varius, dapibus dolor ut, commodo arcu. Pellentesque consequat orci ex, id hendrerit ligula mollis vitae.

Suspendisse nulla libero, efficitur ut dapibus sed, commodo id enim. Cras bibendum urna in elementum egestas. Nulla a metus tincidunt, auctor ante non, pharetra arcu. Donec vitae efficitur enim. Fusce orci odio, scelerisque non vestibulum efficitur, fermentum ac velit. Nunc tincidunt ac lectus nec tincidunt. Sed consectetur semper lacus at posuere. Vestibulum blandit dolor at eros varius, quis euismod felis facilisis. Ut rutrum neque neque. Etiam vitae odio turpis. 
  </p>
</section>

Answer 1

您需要定位到将在绝对定位元素之后显示的 .content 部分:

.content{
   position: relative;
   top: 100px;
}

demo

或者，在.site-header中设置固定高度:

.site-header{
  position: relative;
  width:100%;
  height:100px;
  display:block;
}

demo