當內部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