高さが設定されたセクションでオーバーフローを表示する方法はありますか？

Question

セクションの高さが700pxです。このセクションの内側にはコンテナがあります。これは、コンテナ内の内容が高さが700pxを超えており、オーバーフローが表示され、これが目的の効果です。ただし、このセクションの下に別のセクションを追加すると、新しいセクションの内容がオーバーフローしたコンテナの一部と重なって表示されます。

<section class="info"> 
    <div class="container"> 
     <!--Some Content--> 
    </div> 
</section> 
<section class="text"> 
    <!--Some Content--> 
</section> 

私はコンテナクラス1のzインデックスを与えてみましたし、また情報セクションにあふれ見えると1のzインデックスを与えるが、何も動いていないようにみえました。

Codepen：https://codepen.io/KevinM818/pen/EoybqZ

Answer 1

z屈折率は、absolute、fixed、又はrelativeように配置されている要素上で動作します。ライトブルーボックスを抽出してposition: absolute;に設定し、 divとcontainer divの両方にz-indexを設定します。または、z-index: -1;" to the bg div and removeポジションand z-インデックスfrom theコンテナdivに設定することができます。

調整

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.info { 
 
    height: auto; 
 
    position: relative; 
 
} 
 

 
.bg { 
 
    height: 700px; 
 
    background: lightblue; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    z-index: 0; 
 
} 
 

 
.info .container { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 750px; 
 
    margin: 0 auto; 
 
    background: grey; 
 
    z-index: 1; 
 
} 
 

 
.text { 
 
    height: 500px; 
 
    background: green; 
 
}

<section class="info"> 
 
    <div class="bg"></div> 
 
    <div class="container"> 
 
    <!--Some Content--> 
 
    </div> 
 
</section> 
 
<section class="text"> 
 
    <!--Some Content--> 
 
    <h1>How do I stop this green from overlapping the grey container?</h1> 
 
</section>

： 私は他の記事にコメントを見ました。緑色のボックスに灰色のボックスが重なるようにするには、元のコードのをinfo divに追加するだけです。

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.info { 
 
    position: relative; 
 
} 
 

 
.info { 
 
    height: 700px; 
 
    background: lightblue; 
 
    position: relative; 
 
} 
 

 
.info .container { 
 
    width: 100px; 
 
    height: 750px; 
 
    margin: 0 auto; 
 
    background: grey; 
 
} 
 

 
.text { 
 
    height: 500px; 
 
    background: green; 
 
}

<section class="info"> 
 
    <div class="container"> 
 
    <!--Some Content--> 
 
    </div> 
 
</section> 
 
<section class="text"> 
 
    <!--Some Content--> 
 
    <h1>How do I stop this green from overlapping the grey container?</h1> 
 
</section>

Answer 2

あなたが緑のテキストを対象とする場合は、その後、あなたはsection.infoが700pxよりも背が高くできるようにする必要があります。

は、top=700pxでsection.text絶対位置を与えるsection.infoにheight制約を削除し、それをz-index高を与え、それがうまくいかなければなりません。 codepen調整

：https://codepen.io/anon/pen/BJzJzE