Wordpress上div与伪元素before和after之间的顺序

为什么80%的码农都做不了架构师？>>>   

在wordpress和其他代码框里制作一堆带阴影的照片，发现wordpress的每个页面比如page.php或archive.php里的have_posts()被包含在<div class="wrapper"或id="#wrapper" ></div>之内，挡住了CSS的伪元素before和after，令照片的两边前后阴影不能显示出来。

如果去掉div元素块，只显示body背景，给照片插入的:before和:after阴影可以显示出来。但是Wordpress不能去掉div页面框架，所以在div和两个伪元素之间调整z-index的顺序就行了。z-index属性设置元素的堆叠顺序，就是拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

假如以下的两边阴影效果z-index=-1：

.shadow
{
  position: relative;
}
.shadow:before, .shadow:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  transform: rotate(-8deg);
}
.shadow:after
{
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

然后设置.wrapper或#wrapper的z-index顺序为-2, 低于.shadow的伪元素顺序：

.wrapper {
    background: #ccc;
    position:relative;
    z-index:-2;
}

可以看到照片的两边阴影在页面的上面显示出来了。

有个缺点是因为带.wrapper或#wrapper的div在Wordpress上算是属于全局属性，设计员肯定不希望如果搞不清其他元素的顺序是多少，就会与页面发生互相影响的。所以不建议用页面的往后顺序法，只要在图片下手设置顺序，再把before与after的顺序设置为0：

.shadow img
{
position:absolute;
z-index:1;
}
.shadow:before, .shadow:after
{
  z-index: 0;
  position: absolute;
}

可以得到同样的效果，如果元素之间发生错位，再调整下定位元素的position属性就行。也一样对次级元素有效，例如：

HTML:
<div class="wrapper"> 
  	<div class="shadow">
    <section class="box"><h3>这是box白色块</h3></section>
	</div>
</div>
	
CSS:
.box {
	width:80%;
	height:200px;
	background:#FFF;
	margin:40px auto;
}
.shadow section{
position:relative;
z-index:1;
}
.shadow
{
  position: relative;
}
.shadow:before, .shadow:after
{
  z-index: 0; //顺序都要前进1级元素
  position: absolute;
  content: &quot;&quot;;
  bottom: 25px;
  left: 100px; //前后调整两边阴影位置
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  transform: rotate(-8deg);
}
.shadow:after
{
  transform: rotate(8deg);
  right: 100px; //同上
  left: auto;
}

好了，已通过测试。均为作者原创的，允许转载 ^_^

转载于:https://my.oschina.net/fakt/blog/172529