pure css：在其父項下彈出一個嵌套div

Question

我有一個網站，其中一些預告文本和按鈕顯示在背景圖像上。

格羅索MODO：

<div class="background"> 
<div class="teaser"> 
Teaser text 
</div> 
</div> 

在努力做一個網站響應，該宣傳片文字和按鈕應該出現的股利，而在上面的下面，因爲形象讓人難以閱讀較小的打印。我怎樣才能讓這個嵌套的div出現在下面？我嘗試過使用位置：相對的，但它不會佔用div下面的空間，重疊其他內容。

Answer 1

你說你已經試過position: relative ......你試過position: absolute嵌套的div？

.background { 
 
    background-image: url(http://s3.india.com/wp-content/uploads/2015/07/species1.jpg); 
 
    background-size: cover; 
 
    height: 400px; 
 
    width: 600px; 
 
    position: relative; 
 
    margin-bottom: 20px; 
 
} 
 
.teaser { 
 
    position: absolute; 
 
    bottom: -20px; 
 
}

<div class="background"> 
 
    <div class="teaser"> 
 
    Teaser text 
 
    </div> 
 
</div> 
 
<div> 
 
    More content outside of teaser. 
 
</div>

的teaser是position: absolute到其最近position: relative父（.background）。我的立場是：從background的底部開始-20px，並將012px的底部加上20px的餘量作爲補償​​，所以teaser不會與其他內容重疊。