背景がずれているような囲み枠
CSSの疑似要素afterで背景の色・位置を設定した、colissさんの所の囲み枠。ルーズな雰囲気でとっても可愛いですよね！
WordPressのテーマとの相性なのか？私の技量が足りないからか？苦戦したので、そのメモを記載します。
まずcolissさんの所を参照いただいて、Bottonをdivに変えたかったり、上手くいかなかったり、何故私が上手くいかなかったか知りたい方は（居るのかw）こちらもご覧いただければ嬉しいです。
表示例
こちらも可愛い囲み枠です。
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;
}上手く表示されるまでの道
背景が表示されません
参照元：colissさんのコードを参考に作成。
ガーン。背景が表示されません。
こちら(CodePen)でコードを入力すると正常に表示されるので、私のWordpressとの相性ですね。でも諦めたくない！
kakomiboxのz-indexの値を0以上で追加したら背景が出るようになりました。
(値が0以下(マイナス)だと、すべて消えます)背景が枠線を隠してしまいました。
※値が0以下(マイナス)だと、すべて消えます。
背景を一番後ろにしたい
kakomiboxの、ボーダーの指定を消しました。隠れちゃいますし。
kakomibox:beforeを作り、ボーダーの指定をして完成。
z-indexよ、原因はお前か？
z-index 豆知識
z-indexについて覚えた事をメモします。
数字の順に重なるのではなく、重なり順のルールが色々あります。
下記では親子関係のルールのみ説明します。
z-index:は、同じ階層での重なり順です。
東京と大阪は日本の「子」になるので、ブラジル・中国・日本と同じ階層ではありません。
東京と大阪のz-index値が大きい場合でも、日本(親)の値がブラジル・中国より低ければ、重なり順は下になります。
z-indexを割り振りました。
重なり順は、上から中国―東京―大阪―日本―ブラジルです。東京―日本―大阪ではない所がキモ。親はz-indexの値は関係なく子より下になります。
