CSS - ボックスを重ねて表示する方法

ボックスを重ねて表示したい場合、 CSSの「position」プロパティを使います。

さらに、「z-index」プロパティを使うと、重なる順番を指定することもできます。

ここでは、まずボックスを重ねて表示する方法を説明し、次に重なる順番を指定する方法を紹介します。

ボックスを重ねて表示する

red

blue

HTML

HTMLは次のようなシンプルな構造です。

「.box」を大枠とし、内側に「.red」「.blue」の２つのボックスがあります。

ここではボックスが重なる順番は特に指定していません。その場合、後に記述したボックスが上に表示されます。


<div class="box">
  <div class="red">red</div>
  <div class="blue">blue</div>
</div>

CSS

CSSは少し長くなりますが、次の通り。大事なのは赤字部分です。


/* 大枠 */
.box {
  border: 1px solid silver;
  position: relative;
  width: 200px;
  height: 200px;
}

.red, .blue{
  position: absolute;
  width: 100px;
  height: 100px;
  color: white;
  padding: 5px;
}

.red {
  background-color: red;
  top: 10px;
  left: 10px;
}

.blue {
  background-color: blue;
  bottom: 10px;
  right: 10px;
}

上のCSSのコードを少しずつ見ていきます。


/* 大枠 */
.box {
  position: relative;
  他省略
}

大枠の「.box」に対して「position: relative;」を指定し、内側の２つのボックスを自由に配置できるようにします。


.red, .blue{
  position: absolute;
  他省略
}

内側の２つのボックス「.red」「.blue」に対して「position: absolute;」を指定し、絶対配置とします。


.red {
  background-color: red;
  top: 10px;
  left: 10px;
}

ボックス「.red」の表示位置を top、left プロパティで指定。 topは上から、leftは左端からの距離を指定します。


.blue {
  background-color: blue;
  bottom: 10px;
  right: 10px;
}

ボックス「.blue」の表示位置を bottom、right プロパティで指定。 bottomは下から、rightは右端からの距離を指定します。

ボックスの重なる順番を指定する

先程はボックスの重なる順番を指定しませんでした。その結果、後から記述したボックス「.blue」が上に表示されました。

今回は、先に記述したボックス「.red」を上に表示してみます。

red

blue

HTMLは先程と同じです。

CSSは先程のCSSに次の2点を追加します。


.red {
  他省略
  z-index: 2;
}

.blue {
  他省略
  z-index: 1;
}

「z-index」プロパティは、「重なりあう要素のどちらを上に表示するか」を指定するプロパティです。 z-indexの値が大きい方が上に表示されます。

z-indexの値は1から順番に指定する必要はなく、次のようなアバウトな指定でも機能します。


.red {
  他省略
  z-index: 10;
}

.blue {
  他省略
  z-index: 5;
}

要は上に表示したい要素のz-indexの値の方が大きければOKです。

このように、「position」プロパティを使うことでボックスを重ねて表示し、「top, bottm, left, right」プロパティで表示位置を指定します。

さらに「z-index」プロパティで重なる順番をコントロールすることができます。