伪元素after、before的层级显示

对于伪元素显示在父元素的下层的实现方法

• eg：实现此下图的效果

  
  
  伪元素三角在父元素的下方

实现方法

方法1一

• html

  具体提供代码的平台和产品如下
  WinForms Controls

• css

/*父元素最重要的是加上  transform-style: preserve-3d;  */
.poptip{
  position: absolute;width: 380px;
  background-color: #fff;border: 1px solid #ccc;
  margin-top: 10px;left: 0;z-index: 100;
  padding: 25px;border-radius: 6px;font-size: 0;
  transform-style: preserve-3d;transition: all .3;-webkit-transition: all .3;
}
/*子元素根据 translateZ(-10px) 来调整层级显示 */
.poptip:after{
  content: '';position: absolute;
  width: 18px;height: 18px;border: 1px solid #ccc;background-color: #FFF;
  left: 41px;top: -9px;
  -ms-transform:rotate(45deg) translateZ(-10px);     /* IE 9 */
  -moz-transform:rotate(45deg) translateZ(-10px);    /* Firefox */
  -webkit-transform:rotate(45deg) translateZ(-10px); /* Safari 和 Chrome */
  -o-transform:rotate(45deg) translateZ(-10px);  /* Opera */
}
.poptip:before{
  content: '';position: absolute;width: 22px;height: 2px;
  left: 39px;top: -1px;background-color: #FFF;
}

方法二

• css

.poptip{
  position: absolute;width: 310px;background-color: #fff;border: 1px solid #ccc;z-index: 100;margin-top: 34px;left: 0;
  transition: all .3;-webkit-transition: all .3;display: none;
  padding: 15px 20px 20px;border-radius: 6px;
}
.poptip:before{
  content: '';position: absolute;
  width: 0;height: 0;left: 41px;top: -20px;border:10px solid transparent;border-bottom-color: #ccc;
}
.poptip:after{
  content: '';position: absolute;
  width: 0;height: 0;left: 41px;top: -19px;border:10px solid transparent;
  border-bottom-color: #fff;
}

直接使用宽高为0，用伪元素的边框来进行覆盖