こんにちは!縁紡ぐです。
誰でも一度はつまずいて悩むCSS。
ここでは、HTML要素をpxや%で位置を調整できるCSSプロパティ「position」の使い方について説明します。ぜひ参考にしてみてください。
position を理解していく
CSSでつまずくのはここではないでしょうか。
このpositionを理解することで配置を調整することが、思い通りにできるようになります。
absoluteは、relativeが設定されている親を探す
これって色んな図がネットに転がっていますが、一番分かりやすいと思ったのは、自分でコード書いて理解していくことでした。
absoluteは、relativeで指定した親要素を基準として、配置される。
ようするに、absolute使うなら、親要素にrelativeを設定しておかないといけないってことです。
<div class="head">head
<div class="div1">1だよ</div>
<div class="div2">2だよ</div>
<div class="div3">3だよ</div>
<div class="div4">4だよ</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;
}

2は、1を基準に場所が指定されているので、特に変化はないのですが文字幅までの領域に変更されています。そして、absoluteを指定した場合は、空中に浮いているような感じになるので、次の要素であるdiv3がdiv2がいたところの下に、詰めて表示されるようになりました。
これがなんかイメージしにくいし調整するときにも混乱しやすいところです。
fixedは、ブラウザを基準に表示されるので、スクロールしても一緒にうごかない
よく下にスクロールしても、ヘッダーがずっと表示されているようにするために使われるやつです。
.div1 {
background-color: aqua;
position: fixed;
}
.div2 {
background-color: red;
}
.div3 {
background-color: black;
}
.div4 {
background-color: blue;
}
これで、スクロールした時に、追従しなくなります。スクロール前の状態。

スクロールすると

1だよが、スクロールしても表示されていますね。よく画像で使うので覚えておきましょう。
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だと個人的には思っています。
コメント