純粋なCSS：ネストされたdivをその親の下にポップアウトさせる

Question

私はいくつかのティーザーテキストとボタンが背景イメージ上に表示されるウェブサイトを持っています。

グロッソのmodo：

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

応答ウェブサイトを作るための努力で、画像はそれが難しい小さな活字を読みになりので、このティーザーテキストとボタンは、むしろ上のdivの下に表示されます。このネストされたdivを下に表示させるにはどうすればよいですか？私はposition：relativeを使ってみましたが、divの下のスペースを取って他のコンテンツと重なっていません。

Answer 1

あなたはあなたが試したと言っていますposition: relative ...入れ子divにposition: absoluteを試しましたか？

.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: relative親（.background）にposition: absoluteあります。私は位置：-20pxbackgroundの底から、補償の下にbackgroundの底に20pxを追加したので、teaserは他の内容と重複しません。