positionとoverflow hiddenを併用する際の注意点
cssの positionとoverflow:hiddenを併用する場合。
上手く、overflow:hiddenが効かない時がある。
以下のような指定だと起こる
<div style="overflow: hidden; width: 400px; height: 300px;">
<div style="position: absolute;top: 0px;left: 500px;">
<img src="sample.jpg">
</div>
</div>
親要素にサイズ指定、overflow:hidden;をしても小要素のposition:absoluteが邪魔するらしく、overflow:hidden;が効かなくなる。
なので親にposition:relativeを付けてあげれば正常に動く。
<div style="position: relative; overflow: hidden; width: 400px; height: 300px;">
<div style="position: absolute;top: 0px;left: 500px;">
<img src="sample.jpg">
</div>
</div>
こういった形でも可
<div style="overflow: hidden; width: 400px; height: 300px;position: absolute;top: 0px;left: 500px;">
<img src="sample.jpg">
</div>
overflow:hiddenとpositionはセットで記述しないとうまく動かないよう。
自分の環境だとchrome,safariで確認しました。
この記事が気に入ったらサポートをしてみませんか?