SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Enthusiast paul_sideradesig's Avatar
    Join Date
    Jan 2010
    Location
    brazil
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    box shadow on pseudo elements z-index issue

    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

  2. #2
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Enthusiast paul_sideradesig's Avatar
    Join Date
    Jan 2010
    Location
    brazil
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks sdt76, that seems to do the trick! I was too tired last night to figure that out...

  5. #5
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  6. #6
    SitePoint Enthusiast paul_sideradesig's Avatar
    Join Date
    Jan 2010
    Location
    brazil
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, I can see the benefit of that


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •