概要
状態:-
閲覧数:5,491
投稿日:2013-10-16
更新日:2013-10-16
何も指定しない＝「position:relative;」だと思っていた
・絶対位置は「absolute」
・スクロール固定は「fixed」
・デフォルトは「relative」
間違いに気がつく
・しかし、今日、自分が勘違いしていたことに気が付く
・違うやん！
デフォルトはrelativeではなくstatic
・relativeはデフォルトだからわざわざ書く必要はない、とか、勘違いも甚だしい！
・そもそも、relativeはデフォルトではないし、「position:relative;」を明示的に指定しなければ、意図した動作を示さないシーンは確かに存在する
・例えば、以下のケース
・絶対位置は「absolute」
・スクロール固定は「fixed」
・デフォルトは「relative」
間違いに気がつく
・しかし、今日、自分が勘違いしていたことに気が付く
・違うやん！
static
デフォルトはrelativeではなくstatic
・relativeはデフォルトだからわざわざ書く必要はない、とか、勘違いも甚だしい！
・そもそも、relativeはデフォルトではないし、「position:relative;」を明示的に指定しなければ、意図した動作を示さないシーンは確かに存在する
・例えば、以下のケース
「absolute」と「overflow:hidden;」を組み合わせて使う場合には、親要素に必ず「position:relative;」を指定しなければいけない
概要
・より正確には、下記の通り
「absolute」と「overflow:hidden;」を組み合わせて使う場合には、親要素に必ず「position:static;」以外を指定しなければいけない
absolute基準位置
absoluteした時の基準位置は、親要素のpositionプロパティが「static」か「それ以外」で、大きく異なる
| 親要素のpositionプロパティ | 基準位置 |
|---|---|
| static以外の値を指定 | 親要素の左上が基準位置 |
| staticを指定 | ウィンドウ全体の左上が基準位置 |
overflow:hidden;
「absolute」で「overflow:hidden;」が効かない理由
・親要素のpositionプロパティに何も指定していない、もしくは「static」を指定しているため、overflowの基準位置が「ウィンドウ全体の左上」となっていることが原因
対応
・親要素に、「static」以外のpositionプロパティを指定すれば良い
遭遇例はこちら