position を理解していく
CSSでつまずくのはここではないでしょうか。わたしだけ？
このpositionを理解することで配置を調整することが、思い通りにできるようになるらしいです。
なぜこんな言い方というと、絶賛勉強中だからです（笑）
absoluteは、relativeが設定されている親を探す
これって色んな図がネットに転がっていますが、一番分かりやすいと思ったのは、自分でコード書いて理解していくことでした。
absoluteは、relativeで指定した親要素を基準として、配置される。
ようするに、absolute使うなら、親要素にrelativeを設定しておかないといけないってことです。
<div class="head">head
<div class="div1">１だよ</div>
<div class="div2">２だよ</div>
<div class="div3">３だよ</div>
<div class="div4">４だよ</div>
</div>.head {
background-color: yellow;
}
.div1 {
background-color: aqua;
}
.div2 {
background-color: red;
}
.div3 {
background-color: black;
}
.div4 {
background-color: blue;
}これで表示される内容はこれです。
div1タグに親になるrelativeとして、ポジションを設定します。
.div1 {
background-color: aqua;
position: relative;
}
.div2 {
background-color: red;
}
.div3 {
background-color: black;
}
.div4 {
background-color: blue;
}この段階では、まだ変化はありません。
では、div2にpositionをabsoluteを設定して、relativeの要素を基準にして表示させるようにしてみます。
.head {
background-color: yellow;
}
.div1 {
background-color: aqua;
position: relative;
}
.div2 {
background-color: red;
position: absolute;
}
.div3 {
background-color: black;
}
.div4 {
background-color: blue;
}
２は、１を基準に場所が指定されているので、特に変化はないのですが文字幅までの領域に変更されています。そして、absoluteを指定した場合は、空中に浮いているような感じになるので、次の要素であるdiv3がdiv2がいたところの下に、詰めて表示されるようになりました。
これがなんかイメージしにくいし調整するときにも混乱しやすいところです。
fixedは、ブラウザを基準に表示されるので、スクロールしても一緒にうごかない
よく下にスクロールしても、ヘッダーがずっと表示されているようにするために使われるやつです。
.div1 {
background-color: aqua;
position: fixed;
}
.div2 {
background-color: red;
}
.div3 {
background-color: black;
}
.div4 {
background-color: blue;
}これで、スクロールした時に、追従しなくなります。スクロール前の状態。
スクロールすると
１だよが、スクロールしても表示されていますね。よく画像で使うので覚えておきましょう。
z-index で手前に表示させる方法
z-index は大きいものが、上にくるっていう単純なルールを覚えておけばいいと思います。
二つの重なるものがあった時に、どちらか上に表示させたいものに大きな数字をつけましょう。
.div1 {
background-color: aqua;
position: relative;
}
.div2 {
background-color: red;
position: absolute;
}
.div3 {
background-color: black;
position: absolute;
}
.div4 {
background-color: blue;
position: absolute;
}この段階では指定していないので、最後のdiv4がいちばん上にきて表示されています。
div3にz-indexをつけてみましょう。
.div1 {
background-color: aqua;
position: relative;
}
.div2 {
background-color: red;
position: absolute;
}
.div3 {
background-color: black;
position: absolute;
z-index: 10;
}
.div4 {
background-color: blue;
position: absolute;
}
z-indexが大きいのでdiv3が前面に表示されています。
あとは、使いながら順次確認していくのがいいかと思います。難しいのは、positionだと個人的には思っています。苦手なだけか（笑）
コメント