注目キーワード
  1. CSS
  2. WordPree
  3. Amazfit Bip

【CSS】❔背景をずらしたいが、z-indexが原因で効かない❔

背景がずれているような囲み枠

CSSの疑似要素afterで背景の色・位置を設定した、colissさんの所の囲み枠。ルーズな雰囲気でとっても可愛いですよね!

WordPressのテーマとの相性なのか?私の技量が足りないからか?苦戦したので、そのメモを記載します。

まずcolissさんの所を参照いただいて、Bottondivに変えたかったり、上手くいかなかったり、何故私が上手くいかなかったか知りたい方は(居るのかw)こちらもご覧いただければ嬉しいです。

スポンサーリンク

表示例

yellow
blue
red
green

こちらも可愛い囲み枠です。

HTMLとCSSのコード

<div class="kakomibox yellow">yellow</div>
<div class="kakomibox blue">blue</div>
<div class="kakomibox red">red</div>
<div class="kakomibox green">green</div>
.kakomibox {
  position: relative;
  z-index: 0;  /* 追加 */
  margin: 10px;
  display: inline-block;
  padding: 8px 25px 8px 25px;
//  border:2px solid #a5a5a5;/* 消去 */
  color: #a5a5a5;
  background: none;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
}
.kakomibox:after {
  position: absolute;
  top: 2px;
  left: -4px;
  content: "";
  height: 100%;
  width: 100%;
  z-index: -999;
  -webkit-transform: rotate(-1deg);
  -moz-transform: rotate(0deg);
}
.kakomibox:before {  /* ボーダーの為に追加した部分 ここから*/
  position: absolute;
  border: 2px solid #a5a5a5;
  content: "";
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: -998;  /* afterの数値より上にする */
}/* ボーダーの為に追加した部分 ここまで */

.yellow:after {
  background: #ffffb2;
}
.blue:after {
  background: #d6ffff;
}
.red:after {
  background: #ffe4e1;
}
.green:after {
  background: #dbffdb;
}

上手く表示されるまでの道

背景が表示されません

CSS z-indexが原因で効かない

参照元:colissさんのコードを参考に作成。
ガーン。背景が表示されません。
こちら(CodePen)でコードを入力すると正常に表示されるので、私のWordpressとの相性ですね。でも諦めたくない!

CSS z-indexが原因で効かない

kakomiboxz-indexの値を0以上で追加したら背景が出るようになりました。
(値が0以下(マイナス)だと、すべて消えます)背景が枠線を隠してしまいました。

kakomiboxz-indexを追加せずに、kakomibox:afterz-indexの値を0以上で追加したら背景が出るようになりました。
※値が0以下(マイナス)だと、すべて消えます。
この方法だと、背景が枠線と文字を隠してしまいました。

背景を一番後ろにしたい

CSS z-indexが原因で効かない

kakomiboxの、ボーダーの指定を消しました。隠れちゃいますし。
kakomibox:beforeを作り、ボーダーの指定をして完成。

z-indexよ、原因はお前か?

最初の「背景が表示されません」の部分でz-indexを追加しなきゃいけないってのが、今でもわからないです。(もやもや)
z-indexでGoogle検索すると、一番目が「z-index 効かない」二番目が「z-index 利かない」。みんなを惑わしてますね(笑)

z-index 豆知識

z-indexについて覚えた事をメモします。
数字の順に重なるのではなく、重なり順のルールが色々あります。
下記では親子関係のルールのみ説明します。

z-index 豆知識

z-index:は、同じ階層での重なり順です。
東京と大阪は日本の「子」になるので、ブラジル・中国・日本と同じ階層ではありません。
東京と大阪のz-index値が大きい場合でも、日本(親)の値がブラジル・中国より低ければ、重なり順は下になります。

z-index 豆知識

z-indexを割り振りました。
重なり順は、上から中国―東京―大阪―日本―ブラジルです。東京―日本―大阪ではない所がキモ。親はz-indexの値は関係なく子より下になります。

0