overflowプロパティが効かない…について

結論は、
子要素にposition: absolute;があると効かないです。
親要素にposition: relative;を加えれば解決します。

overflowプロパティについてみていきたいと思います。

overflow:画像がボックスの要素内に内容が収まらない場合に、指定するプロパティです。

visiable:ボックスの要素からはみ出て表示される。
hidden:ボックス内に収まらない場合は、収まらなかった部分は非表示となる。スクロールバーも表示されない。
scroll:内容が僕すに収まらない場合、スクロールバーなどが表示される
auto:ボックスに収まらない内容をどう表示されるかは、ユーザーエージェントに依存する。
 ユーザーエージェント:ホームページを見るとき、各ブラウザが使用しているパソコンのブラウザやOSの情報を発信しています。この情報をユーザーエージェント(User-Agent)と言う
no-display:内容がボックスに収まらない場合は、display:noneが表示されたかのようにボックス全体が削除される。
no-content:内容がボックスに収まらない時は、visibility: hidden;が表示されたかのようにボックス全体が非表示となる。

以上です。

もりけん塾
もりけん先生ブログ

コメント

タイトルとURLをコピーしました