詳解逆引きHTML+CSS辞典

レイアウト - 重なる順番を指定したい

登録タグ
Icon comment count 0
Icon stock count 0

重なる順番を指定したい

一番上に表示させたい

z-indexプロパティ 重なる順番

positionプロパティの値として「relative」「absolute」「fixed」のいずれかを指定して配置位置を指定していると、ボックス同士が重なってしまうことがあります。そのような場合の重なる順番を指定する際に使用するのがz-indexプロパティです。

たとえば、次のサンプルには3つのdiv要素があり、そのうちの2つめと3つめの要素は絶対配置されて次のように重ねて配置されています。

<head>
・・・
<style>
div {
  width: 400px;
  height: 100px;
}
#box-1 {
  color: black;
  background: silver;
}
#box-2 {
  position: absolute;
  top: 50px;
  left: 50px;
  color: white;
  background: url(grass.jpg);
}
#box-3 {
  po

出典情報

Medium

詳解逆引きHTML+CSS辞典

  • 著者: 大藤 幹

コメント

    コメントはありません