CODEWITHSUNDEEP
htmlcssz-indexpseudo-element
dai.hop
dai.hop

Reputation: 761

CSS :after + z-index

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!

Upvotes: 3

Views: 3039

Answers (6)

Hidde
Hidde

Reputation: 11941

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

Upvotes: 1

Adam
Adam

Reputation: 1264

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

Upvotes: 1

bart s
bart s

Reputation: 5100

Replace 

z-index: -1px;

with 

z-index: -1;

See your fiddle

Upvotes: 1

Andy
Andy

Reputation: 14575

You used -1px for z-index, z-index is not measured in pixels, just numbers, make it -1 and it works as intended

Upvotes: 5

Zeta
Zeta

Reputation: 105905

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.

Upvotes: 3

Spencer May
Spencer May

Reputation: 4515

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/

Upvotes: 1

Related Questions