絕對位置低於

Question

我希望div類content始終可見，無論所有屏幕上div類banner-text-container的高度如何。 banner-text-container裏面有動態內容，所以它的高度不固定。要求是那些藍色框在img-banner-container div上是一半，在內容div上是一半。有沒有辦法通過css或js來處理？

h1, 
 
h2 { 
 
    text-align: center; 
 
} 
 

 
.img-banner-container { 
 
    position: relative; 
 
    color: #ffffff!important; 
 
    /*margin-bottom: 200px;*/ 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("http://www.lanlinglaurel.com/data/out/162/5403600-wallpaper-hd.jpeg"); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    /*height: auto;*/ 
 
    width: 100%; 
 
    height: 1000px; 
 
} 
 

 
.banner-text-container { 
 
    position: absolute; 
 
    top: 40%; 
 
    z-index: 10; 
 
} 
 

 
.banner-text-content { 
 
    padding: 0 20%; 
 
    margin-bottom: 30px; 
 
} 
 

 

 
/*.content-with-nav-boxes {*/ 
 

 

 
/*background-color: white;*/ 
 

 

 
/*position: relative;*/ 
 

 

 
/*padding: 0 10%;*/ 
 

 

 
/*margin-bottom: 50px;*/ 
 

 

 
/*height: 500px;*/ 
 

 

 
/*width: 100%;*/ 
 

 

 
/*overflow-x: hidden;*/ 
 

 

 
/*}*/ 
 

 
.small-nav-boxes { 
 
    /*padding: 0 10%;*/ 
 
    /*clear: both;*/ 
 
    width: 100%; 
 
} 
 

 
.small-nav-boxes .single-nav-box { 
 
    text-align: center; 
 
    color: white; 
 
    width: 33.33%!important; 
 
    float: left!important; 
 
} 
 

 
.single-nav-box { 
 
    padding: 10px 0; 
 
    cursor: pointer; 
 
    height: 300px; 
 
    overflow: hidden; 
 
    background-color: #0091CF; 
 
} 
 

 
.content { 
 
    background-color: #4C4145; 
 
    color: white; 
 
} 
 

 
@media screen and (max-width: 1024px) { 
 
    .small-nav-boxes .single-nav-box { 
 
    width: 100%!important; 
 
    float: none!important; 
 
    } 
 
}

<div class="img-banner-container"> 
 
    <div class="banner-text-container"> 
 
    <h1 class="banner-text-title"> 
 
     Lorem Ipsum 
 
    </h1> 
 
    <div class="banner-text-content"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In purus leo, blandit sit amet hendrerit non, lobortis id arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam tempor eu urna vitae aliquam. Donec convallis 
 
     ullamcorper massa. Nam interdum pulvinar libero, a lobortis nunc congue eu. Vestibulum vel elit et metus feugiat faucibus. Ut aliquet dui leo, quis imperdiet quam tincidunt sit amet. Etiam sed nibh efficitur, tincidunt justo a, dapibus dui. In quam 
 
     ipsum, dapibus id convallis vulputate, porttitor et erat. Vivamus eget tellus sit amet nulla aliquet pharetra. Cras sed lorem euismod, maximus urna non, condimentum lacus. Nullam eleifend nunc eget magna ultrices eleifend. 
 
     <br/> Aliquam vel porta quam. Sed a blandit purus. Proin non magna in enim aliquam mollis. Quisque lacus ex, ultrices id nulla scelerisque, suscipit congue risus. Mauris tincidunt gravida semper. Fusce a consectetur lorem. Praesent molestie consequat 
 
     leo, vel egestas mi mollis eu. Quisque non pharetra orci, vitae dapibus sem. Sed pharetra facilisis interdum. Aenean a posuere lorem, et bibendum augue. Vestibulum quis auctor tortor. Suspendisse porta facilisis erat et dignissim. Nulla commodo 
 
     enim tellus, eget vestibulum felis bibendum vel. In semper erat id lacus venenatis tincidunt. Sed a nulla quis leo porttitor porta. 
 
     <br/> Proin erat ipsum, vestibulum ac lacus a, luctus gravida arcu. Curabitur tincidunt varius finibus. Suspendisse at nibh erat. Sed in lobortis mi, in lobortis felis. Phasellus tincidunt tincidunt porta. Nulla non ipsum ullamcorper, egestas dui 
 
     in, rhoncus orci. Nulla malesuada mauris nec nibh porta facilisis. Etiam finibus purus non ex accumsan, accumsan lacinia lectus rutrum. Etiam molestie neque id lectus condimentum ullamcorper. Quisque nunc nisl, venenatis vel diam vitae, facilisis 
 
     pharetra massa. Curabitur fringilla mollis vulputate. Donec fermentum lorem felis. 
 
     <br/> 
 
    </div> 
 
    <div class="small-nav-boxes"> 
 
     <div class="single-nav-box"> 
 
     <p>What is Lorem Ipsum?</p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
     survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
     </div> 
 
     <div class="single-nav-box"> 
 
     <p>Why do we use it?</p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
     survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
     </div> 
 
     <div class="single-nav-box"> 
 
     <p>What is Lorem Ipsum?</p> 
 
     It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, 
 
     content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various 
 
     versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="content"> 
 
    <h2>Where does it come from?</h2> 
 
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up 
 
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum 
 
    et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 
 
    1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English 
 
    versions from the 1914 translation by H. Rackham. 
 
</div>

Answer 1

你的問題有點模糊，但我的理解更從你的代碼直接找。

在我看來，你使用絕對定位不需要的地方，當你幾乎不使用它們的時候也使用太多的重要聲明。

我修改了你的代碼以保持「內容」塊始終存在。如果上面的內容會因動態生成的內容而改變其大小，那麼它應該自然增長並且遵循頁面流程。無需設置高度或使用絕對定位。

這是你的CSS，修改：https://jsfiddle.net/ronaldpoi/e434hy5w/

編輯：有了理想的結果的更多信息，我更新的代碼。在這種情況下，你必須使用絕對定位來控制元素。您還需要添加html標記才能實現。我在Jsfiddle中更新了我的代碼。

這裏是第二個修改：https://jsfiddle.net/ronaldpoi/e434hy5w/1/

* { 
 
    box-sizing: border-box; 
 
} 
 

 
h1, 
 
h2 { 
 
    text-align: center; 
 
} 
 

 
.img-banner-container { 
 
    color: #fff; 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("http://www.lanlinglaurel.com/data/out/162/5403600-wallpaper-hd.jpeg"); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    padding-bottom: 180px; 
 
} 
 

 
.banner-text-container { 
 
    padding: 20px; 
 
    max-width: 960px; 
 
    margin: 0 auto; 
 
} 
 

 
.small-nav-boxes-container { 
 
    position: relative; 
 
    height: 0; 
 
} 
 

 
.small-nav-boxes { 
 
    max-width: 960px; 
 
    margin: 0 auto; 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -480px; 
 
    transform: translateY(-50%); 
 
} 
 

 
.single-nav-box { 
 
    text-align: center; 
 
    width: 33%; 
 
    background-color: #0091CF; 
 
    overflow: hidden; 
 
    display: inline-block; 
 
    padding: 20px; 
 
} 
 

 
.content { 
 
    background-color: #4C4145; 
 
    color: #fff; 
 
    padding-top: 180px; 
 
}