Zインデックスとオーバーフローが正しく表示されない

Question

私は、ユーザーがボックスの上を移動したときにメッセージを表示しているプロジェクトで作業しています。問題を抱えているシナリオを作成しました。

青色のボックスは定義された250pxのフルサイズで表示され、含まれているdivが設定されている200pxにはクリッピングされません。これをラウンドするにはどうにかしています自己完結型である必要があるUserControlのすべての部分。

#first { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: green; 
 
    overflow: hidden; 
 
} 
 

 
#second { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    position: relative; 
 
} 
 

 
#fourth 
 
{ 
 
    width: 250px; 
 
    height: 50px; 
 
    background-color: blue; 
 
    position: absolute; 
 
    z-index: 100; 
 
}

<div id="first"> 
 
    <div id="second"> 
 
     <div id="fourth"> 
 
     test 
 
     </div>  
 
    </div> 
 
</div>

Answer 1

これはあなたが後にしているものですが、あなたがする必要があるすべてはあなたのfirstのdivに見えるに隠されてからオーバーフローに変更され、完全にわからない：

#first { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: green; 
 
    overflow: visible; /* change this */ 
 
} 
 

 
#second { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    position: relative; 
 
} 
 

 
#fourth 
 
{ 
 
    width: 250px; 
 
    height: 50px; 
 
    background-color: blue; 
 
    position: absolute; 
 
    z-index: 100; 
 
}

<div id="first"> 
 
    <div id="second"> 
 
     <div id="fourth"> 
 
     test 
 
     </div>  
 
    </div> 
 
</div>

Answer 2

変更：

#first { 
width: 200px; 
height: 200px; 
background-color: green; 

}に

#first { 
    width: 200px; 
    height: 200px; 
    background-color: green; 
    overflow: hidden; 

}

つまり、overflow：hiddenを削除して、希望の青いdivが表示されます。

Answer 3

有線はあなたが持って言ったように＃最初の要素からoverflow: hidden;を削除します。そうしないと、内部のすべての要素が境界の外側に到達する必要がある場合、それらの要素はすべて切断されます。

#first { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: green; 
 
} 
 

 
#second { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    position: relative; 
 
} 
 

 
#fourth 
 
{ 
 
    width: 250px; 
 
    height: 50px; 
 
    background-color: blue; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 100; 
 
}

<div id="first"> 
 
    <div id="second"> 
 
     <div id="fourth"> 
 
     test 
 
     </div>  
 
    </div> 
 
</div>