基本的な事ですみません。

Question

HTML,CSS初心者です。
自分のブログを改造しているのですが、
http://ameblo.jp/cotton-candy-sky/
のブログなんですが、
サイドの葉っぱの部分がどうしても前にきています。
.skinContentsAreaの後ろに
（つまりメインの部分の後ろに持っていきたいのです。）
CSSで
.skinContentsArea
にz-index:0;で指定していても
前に出てきてしまいます。

設定の仕方を教えて下さい！

お願いいたします。

Answer 1

ブログのソースを見たところ下記のようになっています。

<div class="skinContentsArea">
  <!-- 中略 -->
  <div class="freespaceArea subModule">
    <div class="leaf_l"></div>
    <div class="leaf_r"></div>
  </div>
</div>

.skinContentsArea {
  position: relative;
  z-index: 0;
}
.leaf_l {
  position: absolute;
  z-index: 0;
}
.leaf_r {
  position: absolute;
  z-index: 0;
}

z-indexを使用するにはpositionをstatic以外に指定してあげる必要があります。これがミソです。
positionはスタック文脈というものを形成します。これはPhotoshopやillustratorのレイヤーみたいなもので、スタック文脈が形成されたコンテナ内の要素はこのレイヤーごと動くイメージようなイメージで捉えると分かりやすいかと思います。

このブログの例ですと下記のような感じになります。

div.skinContentsArea( z-index: 0 )
  |-- div.freespaceArea subModule
        |-- div.leaf_l( z-index: 0の-1 )
        |-- div.leaf_r( z-index: 0の-1 )

div.leaf_l、div.leaf_rはdiv.skinContentsAreaレイヤー内の-1の重なり順という解釈になるので、leaf_l,leaf_rがdiv.skinContentsAreaの下になることはありません。

ブログ記事エリアだけなら記事エリアにz-indexつけて背景色を指定すれば良いのですが、サイドメニューの下にもしなければならないので、このマークアップでは厳しいかなぁと思います。

[参考]
スタック文脈 - Web developer guide | MDN
z-index再入門 1 | CodeGrid

参考までに

私だったらサイドメニュー内にhtmlを置く方法ではなくheaderの要素に対して:before, :afterで装飾をつけます。下にざっくりとしたCSSを書いておきます

/* ヘッダーのタイトル画像が入っているエリア */
.skinHeaderArea {
  position: relative;
  /* テーマ？にoverflow: hidden;が付いてるので打ち消す */
  overflow: initial;
}
.skinHeaderArea:before,
.skinHeaderArea:after {
  width: 281px;
  height: 602px;
  display: block;
  position: absolute;
  top: 75px;
  z-index: 0;
}
.skinHeaderArea:before {
  content: url('http://stat.blogskin.ameba.jp/blogskin_images/20160214/22/cf/Nj/p/o02810602cotton-candy-sky1455457377132.png');
  left: -108px;
}
.skinHeaderArea:after {
  content: url('http://stat.blogskin.ameba.jp/blogskin_images/20160214/22/12/bR/p/o02810602cotton-candy-sky1455457366686.png');
  right: -108px;
}

/* コンテンツエリアが上になるようにする */
.skinContentsArea {
  position: relative;
  z-index: 1;
}

Comments

[marshmallow]

とても丁寧にありがとうございます。
下さったコードで無事設置できました！
色々教えて下さり大変感謝しています。
またお世話になるかもしれませんが、よろしくお願いします。

少しcssが好きになってきました！

Answer 2

z-index は同じスタックコンテキスト上にある要素同士の重なり順を変更するものです。
ここでは .leaf_l が .skinContentsArea 子要素となっているため z-index では調整できません。代わりにこれを .skinContentsArea の外に出すことで変更できるはずです。

スタックコンテキストについては下のページが詳しくてわかりやすいと思います。

参考：
要素の重なりについて本気出して考えてみた（z-indexとか何とかとか） – No.1026

Comments

[marshmallow]

ありがとうございます！とてもわかりやすい解説で解決することができました！
またお世話になるかもしれませんがよろしくお願いします。