相対位置にある絶対配置要素の背景スタイル

Question

アニメーションを含むページを作成する際に一般的なCSSの問題があります。私は、ページ全体の色のような背景スタイルを変更し、Z座標を使ってその下にある異なる色の他のコンテナを表示するためにシフトする目的で、相対的な位置に置かれた1つ以上のコンテナと、 。

背景色が表示されないのはなぜですか？

.main { 
 
    position: relative; 
 
} 
 

 
.bg { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.green { 
 
    background: green; 
 
    z-index: 5; 
 
    left: 50%; 
 
} 
 

 
.blue { 
 
    background: blue; 
 
    z-index: 4; 
 
}

<div class="main"> 
 
    <div class="bg green">green</div> 
 
    <div class="bg blue">blue</div> 
 
</div>

Answer 1

あなたがabsoluteとして何かを置くと、それが文書フローから削除されます。つまり、mainには何も与えられていないので（デフォルトはautoなので）、子どものheight: 100%はまだ0です。 overflow-yのデフォルト値はvisibleであるため、テキストは引き続き表示されます。

修正するには、mainの高さを指定します。

body, html, .main { height: 100% } 
 
.main { 
 
    position: relative; 
 
} 
 

 
.bg { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.green { 
 
    background: green; 
 
    z-index: 5; 
 
    left: 50%; 
 
} 
 

 
.blue { 
 
    background: blue; 
 
    z-index: 4; 
 
}

<div class="main"> 
 
    <div class="bg green">green</div> 
 
    <div class="bg blue">blue</div> 
 
</div>