CSS のオーバーフロー:hidden エラーの解決方法

失敗の原因

今日、カルーセルを書いていたときに、overflow;hidden; が失敗する可能性があることがわかりました。理由は次のとおりです。親要素が、オーバーフローした絶対位置の子要素を非表示にしたい場合、親要素に配置を追加する必要があります。絶対位置の子要素は、配置された親要素を内側から外側に探し、見つからない場合は、overflow:hidden; も失敗するためです。

それをチェックしてください

繰り返しになりますが、上で述べたように、overflow:hidden; が失敗する理由は、親要素がオーバーフローした絶対位置の子要素を非表示にしたい場合、親要素に位置付けを追加する必要があるためです。絶対位置の子要素は、位置付けされた親要素を内側から外側に探し、親要素が見つからない場合は、overflow:hidden; も失敗します。

試してみましょう:

（１）

<スタイル>
    .ラッパー{
        幅: 200ピクセル;
        高さ: 200px;
        背景色: 赤;
        オーバーフロー: 非表示;                 
     }
     。コンテンツ{
         幅: 200ピクセル;
         高さ: 200px;
         背景色: 緑;
         位置: 絶対;
         上: 100px;
         左: 100px;
      }
</スタイル>
<本文>
     <div class="wrapper">
         <div class="content"></div>
     </div>
</本文>

子要素が絶対位置に配置されている場合、overflow:hidden;は無効であることは明らかです。

（２）

<スタイル>
    .ラッパー{
        幅: 200ピクセル;
        高さ: 200px;
        背景色: 赤;
        オーバーフロー: 非表示;      
        位置: 相対的;           
    }
    。コンテンツ{
        幅: 200ピクセル;
        高さ: 200px;
        背景色: 緑;
        位置: 絶対;
        上: 100px;
        左: 100px;
     }
</スタイル>
<本文>
    <div class="wrapper">
        <div class="content"></div>
    </div>
</本文>

親要素に絶対または相対的な位置指定を追加するだけで済みます（ただし、位置指定が絶対の場合、親要素はy軸の下の要素に影響することに注意してください）。これにより、絶対位置指定の子要素が親要素を見つけることができ、overflow:hidden;が失敗しなくなります。