| SitePoint Sponsor |
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...ithout-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
The CSS 2.1 spec says this:
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.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; }
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.
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.
thanks sdt76, that seems to do the trick! I was too tired last night to figure that out...
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.
Code HTML4Strict:<!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>
yes, I can see the benefit of that
Posting Permissions
Reply With Quote
Bookmarks