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

演示

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

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

演示

Answer 2

我想你想要这样的小提琴与内容

 .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> 

和小提琴没有内容 ，

 .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