HTML,CSS初心者です。
自分のブログを改造しているのですが、
http://ameblo.jp/cotton-candy-sky/
のブログなんですが、
サイドの葉っぱの部分がどうしても前にきています。
.skinContentsAreaの後ろに
(つまりメインの部分の後ろに持っていきたいのです。)
CSSで
.skinContentsArea
にz-index:0;で指定していても
前に出てきてしまいます。
設定の仕方を教えて下さい!
お願いいたします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
ブログのソースを見たところ下記のようになっています。
html
1<div class="skinContentsArea"> 2 <!-- 中略 --> 3 <div class="freespaceArea subModule"> 4 <div class="leaf_l"></div> 5 <div class="leaf_r"></div> 6 </div> 7</div>
css
1.skinContentsArea { 2 position: relative; 3 z-index: 0; 4} 5.leaf_l { 6 position: absolute; 7 z-index: 0; 8} 9.leaf_r { 10 position: absolute; 11 z-index: 0; 12}
z-index
を使用するにはposition
をstatic
以外に指定してあげる必要があります。これがミソです。
position
はスタック文脈というものを形成します。これはPhotoshopやillustratorのレイヤーみたいなもので、スタック文脈が形成されたコンテナ内の要素はこのレイヤーごと動くイメージようなイメージで捉えると分かりやすいかと思います。
このブログの例ですと下記のような感じになります。
text
1div.skinContentsArea( z-index: 0 ) 2 |-- div.freespaceArea subModule 3 |-- div.leaf_l( z-index: 0の-1 ) 4 |-- 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を書いておきます
css
1/* ヘッダーのタイトル画像が入っているエリア */ 2.skinHeaderArea { 3 position: relative; 4 /* テーマ?にoverflow: hidden;が付いてるので打ち消す */ 5 overflow: initial; 6} 7.skinHeaderArea:before, 8.skinHeaderArea:after { 9 width: 281px; 10 height: 602px; 11 display: block; 12 position: absolute; 13 top: 75px; 14 z-index: 0; 15} 16.skinHeaderArea:before { 17 content: url('http://stat.blogskin.ameba.jp/blogskin_images/20160214/22/cf/Nj/p/o02810602cotton-candy-sky1455457377132.png'); 18 left: -108px; 19} 20.skinHeaderArea:after { 21 content: url('http://stat.blogskin.ameba.jp/blogskin_images/20160214/22/12/bR/p/o02810602cotton-candy-sky1455457366686.png'); 22 right: -108px; 23} 24 25/* コンテンツエリアが上になるようにする */ 26.skinContentsArea { 27 position: relative; 28 z-index: 1; 29}
投稿2016/02/14 17:50
総合スコア596
0
ベストアンサー
z-index
は同じスタックコンテキスト上にある要素同士の重なり順を変更するものです。
ここでは .leaf_l
が .skinContentsArea
子要素となっているため z-index
では調整できません。代わりにこれを .skinContentsArea
の外に出すことで変更できるはずです。
スタックコンテキストについては下のページが詳しくてわかりやすいと思います。
投稿2016/02/14 16:32
総合スコア1610
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/02/15 08:22