Question

我正在尝试使用向下箭头创建一个消息框。我想使用箭头的：after伪元素来避免额外的HTML，并且我希望伪元素继承其父元素的box-shadow。

我无法让那个伪元素落后于父元素。你们任何人都可以找出我出错的地方吗？

谢谢！

Answer 1

您使用-1px表示z-index，z-index不是以像素为单位测量的，只是数字，使其成为-1并且按预期工作

Answer 2

z-index是auto，整数或inherit。所以使用

z-index: -1;

而不是

z-index: -1px;

解释

z-index根据绘制渲染树的顺序确定元素的等级。因此，它不是大小值（例如px，pt或em），因为z-index不提供连续值（0.1em，0.09 em，0.099em，...）但只有离散值，它们只是以整数形式给出：

根据堆叠上下文描述渲染树在画布上绘制的顺序。堆叠上下文可以包含更多堆栈上下文。从其父堆栈上下文的角度来看，堆叠上下文是原子的;其他堆叠环境中的框可能不在其任何框之间。

Answer 3

您的z-index设置为z-index: -1px;，但它应该只是z-index: -1;并修复它。

http://jsfiddle.net/Ch78n/7/

Answer 4

替换

z-index: -1px;

带

z-index: -1;

See your fiddle

Answer 5

将z-index: -1px;更改为z-index: -1;，因为z-index不是以像素为单位来衡量的。 JSFiddle：http://jsfiddle.net/Ch78n/8/

Answer 6

您可以使用透明度来使用边框来制作三角形。阴影不包括在内，因为你会得到一个正方形。此解决方案使用较少的CSS3，因此更兼容浏览器。

小提琴：http://jsfiddle.net/Ch78n/9/

代码：

div:after {                        
    content: '';
    box-shadow: none;
    position: absolute;
    left: 80px;
    top: 30px;

    border-color: #EC5F54 transparent transparent; 
    border-style: solid; 
    border-width: 10px 10px 0; 
    width: 0;
    height: 0;
}

CSS：在+ z-index之后

6 个答案:

解释