忍者ブログ
03 January

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

20 October

z-index :after　:before　で装飾したとき親要素を一番上にする

z-indexは　positoin:static;　以外のpositioni指定をしていなければ効かない
親にはz-indexをつけない。つけたら一番上にならない


http://blog.56doc.net/Entry/415/
p{
  position:relative;
  top:30px;
  width:150px;
  height:150px;
  background-color:rgba(255,0,0,0.8);
}

p:before{
  content:"before擬似要素";
  position:absolute;
  top:-15px;
  left:15px;
  width:150px;
  height:150px;
  background-color:rgba(0,255,0,0.8);
  z-index:-1;
}

p:after{
  content:"after擬似要素";
  position:absolute;
  top:-30px;
  left:30px;
  width:150px;
  height:150px;
  background-color:rgba(0,0,255,0.8);
  z-index:-2;
}
PR