【CSSでつまづくところ】positionの指定を解説

こんにちは！縁紡ぐです。
誰でも一度はつまずいて悩むCSS。
ここでは、HTML要素をpxや%で位置を調整できるCSSプロパティ「position」の使い方について説明します。ぜひ参考にしてみてください。

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;
}