Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

HTML&CSS 重なり順を指定する

はじめに

CSSのz-indexを使って、
「例えばパワポの最前面に移動、前面に移動」のように簡単に重なり順を指定する方法をまとめました。

また、前回の「rgbaを使って背景画像を暗くする」の記事の続きになっています。
https://qiita.com/szaizen/items/3ab28c03a76e08bb5581

z-index

z-indexは要素の重なり順を決めることのできるプロパティです。

test {
  z-index: 数字;
}

数字で指定した値が大きい要素ほど上に表示されます。
これを使うだけで簡単に重なり順が指定できる、、、はず。
次、実践してみます。

実践例

スクリーンショット 2018-04-10 20.59.31.png

html
<body>
<div class="back">
  <h1 class="title">パソコン教室</h1>
  <p>Learn together!</p>
</div>
</body>
css
body{
  height: 100%;
  margin: 0;
}
.back{
  /* 画面いっぱいに背景画像を貼り付ける */
  background: url(http://simplemodern-interior.jp/knowledge/wp-content/uplads/2014/07/pc.png) no-repeat center;
  background-size: cover;
  position: relative;
  height:100%;
}
.back::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

前回、rgbaを使って背景画像を暗くしました。
しかし、文字まで暗くなって見にくいので、最前面に出したいと思います。

position: absolute;

スクリーンショット 2018-04-10 21.32.11.png

css
.title{
    position: absolute;
    width: 100%;
    text-align: center;
}

このように記述します。
この場合順番通りなのでうまく前面に表示されますが、HTMLが以下のような場合は背景画像に回り込んで表示されなくなってしまいます。

html
<body>
<h1 class="title">パソコン教室</h1>
<div class="back">
    <p>Learn together!</p>
</div>
</body>

z-indexで重なり順を指定する

そこで登場するのがz-indexさん。
ちなみにpositionがデフォルトのstaticだと適用されません。

なのでz-indexを追加すると、、

css
.title{
    position: absolute;
    width: 100%;
    text-align: center;
    /* 重なり順を指定*/
    z-index: 1;
}

ちゃんと表示できました!!!!

参考サイト

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
4
Help us understand the problem. What are the problem?