CSS #16 重ね順とはみ出し

2017年9月14日 2017年9月14日

こんにちは！
UPSTARTSのSベンです！

今回は「重ね順とはみ出し」についての内容です。

こちらのhtmlにスタイルをあてていきます。

<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>

<body>

</body>

重ね順
- z-index
はみ出し

重ね順

重ね順をやる前に下準備をしていきたいと思います。

htmlで3つのdivを用意しましたので、こちらをBOXの形にしたいと思います。

#box1, #box2, #box3 {
    width: 100px;
    height: 50px;
}

#box1 {
    background: orange;
}

#box2 {
    background: green;
}

#box3 {
    background: yellow;
}

#box1, #box2, #box3 {

width: 100px;

height: 50px;

}

#box1 {

background: orange;

}

#box2 {

background: green;

}

#box3 {

background: yellow;

}

このようにすると、3つが重なってしまっていて、
下のBOXが見えないので少しずつずらしていきます。

#box1, #box2, #box3 {
    width: 100px;
    height: 50px;
    position: absolute;
}

#box1 {
    background: orange;
    top: 10px;
    left: 10px;
}

#box2 {
    background: green;
    top: 20px;
    left: 20px;
}

#box3 {
    background: yellow;
    top: 30px;
    left: 30px;
}

#box1, #box2, #box3 {

width: 100px;

height: 50px;

position: absolute;

}

#box1 {

background: orange;

top: 10px;

left: 10px;

}

#box2 {

background: green;

top: 20px;

left: 20px;

}

#box3 {

background: yellow;

top: 30px;

left: 30px;

}

positionでabsoluteを指定し、
3つのボックスがずれて重なった表示になったかと思います。

では下準備ができましたので、実際に重ね順を指定していきます。

z-index

要素の重なり順を指定するには、
「z-index」を使います。

基本的な重なり順としては、後に書いたものが上にくるようになっています。

今回で言うと、一番最後に書いているのはbox3になりますので、
box3が一番上に表示されている状態になります。

この重なり順を指定したいときに使うのが、z-indexになります。

使う上でのルール

z-indexを使うには2つルールがあります。

1つ目が、positionプロパティでstatic以外が指定されている要素のみ有効
2つ目が、z-indexで指定した数値が大きいほど重ね順が上に表示

ではそれを踏まえて書いていきましょう。

現在は、

一番上がbox3
その下がbox2
一番下がbox1

となっています。

今回はその順番を逆にしてみたいと思います。

#box1, #box2, #box3 {
    width: 100px;
    height: 50px;
    position: absolute;
}

#box1 {
    background: orange;
    top: 10px;
    left: 10px;
    z-index: 3;
}

#box2 {
    background: green;
    top: 20px;
    left: 20px;
    z-index: 2;
}

#box3 {
    background: yellow;
    top: 30px;
    left: 30px;
    z-index: 1;
}

#box1, #box2, #box3 {

width: 100px;

height: 50px;

position: absolute;

}

#box1 {

background: orange;

top: 10px;

left: 10px;

z-index: 3;

}

#box2 {

background: green;

top: 20px;

left: 20px;

z-index: 2;

}

#box3 {

background: yellow;

top: 30px;

left: 30px;

z-index: 1;

}

このようにすると、

z-indexで指定した数値が一番大きいbox1が一番上になり、
その次にbox2、一番下がbox3になります。

はみ出し

次に「overflow」についてやっていきます。

こちらはブロック要素のコンテンツがその幅や高さからはみ出している部分をどうするかといったものになります。

ではbox1に大量のテキストを入れてみます。

<body>
    <div id="box1">
        フランキー将軍
        フランキー将軍
        フランキー将軍
        フランキー将軍
        フランキー将軍
        フランキー将軍
        フランキー将軍
        フランキー将軍
    </div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>

<body>

フランキー将軍

</div>

</body>

テキストがbox1からはみ出している状態になるかと思います。

こちらにoverflowプロパティを使っていきます。

初期値がvisibleになっていて、ボックスからはみ出して表示されます。

#box1 {
    background: orange;
    top: 10px;
    left: 10px;
    z-index: 3;
    overflow: scroll;
}

#box1 {

background: orange;

top: 10px;

left: 10px;

z-index: 3;

overflow: scroll;

}

scrollだと、入りきらない部分はスクロールして見れるようになります。

hiddenだと、はみ出た部分は表示されなくなります。

autoだと、ブラウザによって変わってくるのですが、
基本的にはスクロールして見れるようになります。

今回は「重ね順とはみ出し」についてやっていきました。

次回は「左寄せと右寄せ+α」についてです。

ではまた次回！