当内部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

Answer 2

我想你想要这样的东西Fiddle with content

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

<header class="site-header">
  <nav class="top-nav">
  
  </nav>
  <div class="main-nav-wrapper">
    <nav class="overlay"></nav>
    <nav class="main-nav">home | about</nav>
    <p>
    More content
    </p>
  </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.
  </p>
</section>

和Fiddle without content，

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

<header class="site-header">
  <nav class="top-nav">
  
  </nav>
  <div class="main-nav-wrapper">
    <nav class="overlay"></nav>
    <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. 
  </p>
</section>

所以现在如果有一个内容，叠加层将出现，如果不是它将不会显示自己，我已经添加任何固定的高度到任何元素我刚添加了叠加的div。这是你想要的吗？

Answer 3

这是因为<header>没有实际高度，你在里面有导航，它是从文档流中删除的。将高度设置为<header>或者不使用绝对定位进行导航，否则<header>将折叠到高度0。

https://jsfiddle.net/j474js6e/3/ - 标题高度

https://jsfiddle.net/j474js6e/5/ - 从包装器中删除绝对值

Answer 4

绝对定位的div在其父元素中不占用任何空间。因此，您可以创建空间，例如在受影响的元素中具有与绝对定位元素一样高的边距。在你的情况下：

.content { margin-top: 120px; }

小提琴：https://jsfiddle.net/ryup26kx/

Answer 5

只需删除position:absolute;中的.main-nav-wrapper：

.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{
  XXXposition: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 6

 position:relative:
 top:0px:

 clear:both;

清除较低的div