Box shadow on pseudo elements z-index issue

HTML & CSS
1

Hi

http://test1111.chiroplace.com.au/

I need to apply some box shadows to the green box with the chameleon
See http://nicolasgallagher.com/css-drop-shadows-without-images/ for an example

the problem is that the pseudo elements are appearing on top of the main element instead of under, even though the z-index is -1

any help or suggestions appreciated

thanks

2

The CSS 2.1 spec says this:

The :before and :after pseudo-elements interact with other boxes as if they were real elements inserted just inside their associated element.

For example, the following document fragment and style sheet:

<p> Text </p> p:before { display: block; content: ‘Some’; }
…would render in exactly the same way as the following document fragment and style sheet:
<p><span>Some</span> Text </p> span { display: block }

Similarly, the following document fragment and style sheet:

<h2> Header </h2> h2:after { display: block; content: ‘Thing’; }
…would render in exactly the same way as the following document fragment and style sheet:

<h2> Header <span>Thing</span></h2> h2 { display: block; }
span { display: block; }

To me that means pseudo elements behave similar to child elements. So that would mean that the content in :after is rendering like this: <div> <h1>Chiropractic Care</h1> <span>empty content</span><div>. Where you are attempting to position the DIV with a positive z index and the contained SPAN with a negative z-index which doesn’t work with how elements stack.

So, as far as I know you would need to take your shadow effect out of the containing div and apply it to another element and make it a sibling to the header rather than a child. Although, maybe someone else has an idea of how you could get it to work without doing that.

3

LOL, scratch that, it can work the way you have that, although I don’t technically know why given the above, maybe someone can enlighten, but you just need to put a z-index on #inner. Your shadow is hiding behind that noise.png DIV. You have to take the z-index off “.home Content .hentry.” They don’t have positioning on that element in the example page.

4

thanks sdt76, that seems to do the trick! I was too tired last night to figure that out…

5

So I played around and I didn’t realize this but apparently, strangely enough, you can stack child elements beneath the parent as long as the parent does not have a z-index. The parent can either have positioning declared or not, but either way no z-index, even if it is a positive one. Not sure why, but it works and it is handy to know.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>

<body>
<div style="height:200px; width:200px; background:#900; position:relative;">
  <div style="height:100px; width:100px; background:#03C; position:relative; z-index:-1; bottom: -150px; left: 150px;"></div>
</div>

</body>
</html>
6

yes, I can see the benefit of that :slight_smile: