元ダメ人間がパソコンを一から学び、独学でエンジニアに。YouTubeではアップスターツで動画投稿をしています。2017年9月14日FacebookTwitterはてブPocketFeedlyこんにちは!UPSTARTSのSベンです!今回は「重ね順とはみ出し」についての内容です。こちらのhtmlにスタイルをあてていきます。重ね順をやる前に下準備をしていきたいと思います。htmlで3つのdivを用意しましたので、こちらをBOXの形にしたいと思います。下のBOXが見えないので少しずつずらしていきます。30px;}positionでabsoluteを指定し、3つのボックスがずれて重なった表示になったかと思います。下準備ができましたので、実際に重ね順を指定していきます。「z-index」を使います。基本的な重なり順としては、後に書いたものが上にくるようになっています。今回で言うと、一番最後に書いているのはbox3になりますので、box3が一番上に表示されている状態になります。この重なり順を指定したいときに使うのが、z-indexになります。使う上でのルールz-indexを使うには2つルールがあります。1つ目が、positionプロパティでstatic以外が指定されている要素のみ有効2つ目が、z-indexで指定した数値が大きいほど重ね順が上に表示ではそれを踏まえて書いていきましょう。上がbox3その下がbox2一番下がbox1となっています。今回はその順番を逆にしてみたいと思います。1;}このようにすると、z-indexで指定した数値が一番大きいbox1が一番上になり、その次にbox2、一番下がbox3になります。はみ出し次に「overflow」についてやっていきます。こちらはブロック要素のコンテンツがその幅や高さからはみ出している部分をどうするかといったものになります。box1に大量のテキストを入れてみます。id="box3"></div></body>テキストがbox1からはみ出している状態になるかと思います。こちらにoverflowプロパティを使っていきます。初期値がvisibleになっていて、ボックスからはみ出して表示されます。scroll;}scrollだと、入りきらない部分はスクロールして見れるようになります。hiddenだと、はみ出た部分は表示されなくなります。基本的にはスクロールして見れるようになります。今回は「重ね順とはみ出し」についてやっていきました。次回は「左寄せと右寄せ+α」についてです。アップスターツのSベンです。アップスターツのSベンです。