CSS :after + z-index

Question

I'm trying to create a message box with a down pointing arrow. I want to use the :after pseudo element for the arrow to avoid extra HTML, and I want the pseudo element to inherit the box-shadow of its parent.

My attempt: http://goo.gl/LDs7N

I just can't get that pseudo element to go behind the parent. Can any of you figure out where I'm going wrong?

Thanks!

Answer 1

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

Answer 2

z-index is either auto , an integer or inherit . So use

z-index: -1;

instead of

z-index: -1px;

Explanation

z-index determines rank of the element in the order in which the rendering tree is painted. As such it isn't a size value (like px , pt or em ), as z-index doesn't provide continuous values ( 0.1em , 0.09em, 0.099em ,...) but only discrete values, which are simply given as an integer:

The order in which the rendering tree is painted onto the canvas is described in terms of stacking contexts. Stacking contexts can contain further stacking contexts. A stacking context is atomic from the point of view of its parent stacking context; boxes in other stacking contexts may not come between any of its boxes.

Answer 3

Your z-index is set to z-index: -1px; but it should just be z-index: -1; and that fixed it.

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

Answer 4

Replace

z-index: -1px;

with

z-index: -1;

See your fiddle

Answer 5

Change z-index: -1px; to z-index: -1; because z-index isn't measured in pixels. JSFiddle: http://jsfiddle.net/Ch78n/8/

Answer 6

You can use borders to make a triangle, using transparancy. The shadow is not included, because you will get a square. This solution uses less CSS3, so is more browser compatible.

Fiddle: http://jsfiddle.net/Ch78n/9/

Code:

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;
}