SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    :after and z-index

    Hi all

    I hava a demo here - http://www.ttmt.org.uk/shadow/

    I have a div with a border, I'm using :after to place an image of a shadow after the div.

    Is it possible to put this image under the div using z-index so I can slightly move the image up like

    http://www.ttmt.org.uk/shadow/1.png


    Code:
      <!DOCTYPE html>
      <html lang="en">
        <meta charset="UTF-8">
    
        <!--css-->
    
        <style type="text/css">
          *{
            margin:0;
            padding:0;
          }
          #box{
            position:relative;
            margin:100px;
            width:310px;
            height:350px;
            border-radius:5px;
            border:2px solid #aaa;
            z-index:1;
          }
          #box:after{
            content:url(shadow-left.png) 0 0 no-repeat;
            position:absolute;
            bottom:-46px;
            left:0;
            z-index:-1;
    
          }
        </style>
    
    
        <title>Title of the document</title>
        </head>
    
      <body>
    
        <div id="box">
    
        </div>  
    
      </body>
    
      </html>

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I don't see a shadow in the first example: http://www.ttmt.org.uk/shadow/

    Never mind. One must use the Chrome browser to see the shadow. FF doesn't see it.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Just set the z-index of #box to auto (z-index:auto) which effectively means no z-index as such and then the child can then sit behind the parent. You will need to give #box a white background colour or you will still see it through the parent.

    Note that once you apply a value other than auto for-z-index then it becomes atomic and a child can never go below the parents background.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    PS its not showing in Firefox because you have used background properties on the content property which doesn't accept them. Just use the url.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <meta charset="UTF-8">
    
    <!--css-->
    
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    #box {
    	position:relative;
    	margin:100px;
    	width:310px;
    	height:350px;
    	border-radius:5px;
    	border:2px solid #aaa;
    	z-index:auto;
    	background:#fff;
    }
    #box:after {
    	content:url(http://www.ttmt.org.uk/shadow/shadow-left.png);
    	position:absolute;
    	bottom:-46px;
    	left:0;
    	z-index:-1;
    }
    </style>
    <title>Title of the document</title>
    </head><body>
    <div id="box"> </div>
    </body>
    </html>
    Note that it won't work in IE8 as it doesn't allow z-index to work properly on :after or :before pseudo elements.

  5. #5
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B

    Sounds like :after and z-index might not be the the best way to do this.

    Would it be better to have a separate element that contains the shadow image and then position that. Here I've used a span

    Code:
    <!DOCTYPE html>
    <html lang="en">
      <meta charset="UTF-8">
      
      <!--css-->
      
      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
        #box{
          background:#fff;
          position:relative;
          margin:100px;
          width:310px;
          height:350px;
          border-radius:5px;
          border:2px solid #aaa;
          z-index:auto;
        }
        /*
        #box:after{
          display:block;
          content:url(shadow-left.png) 0 0 no-repeat;
          position:absolute;
          bottom:-46px;
          left:0;
          z-index:-1;
          
        }
        */
        #box span{
          display:block;
          background:url(shadow-left.png) 0 0 no-repeat;
          width:310px;
          height:48px;
          position:absolute;
          bottom:-47px;
          z-index:-1;
        }
      </style>
      
        
      <title>Title of the document</title>
      </head>
      
    <body>
      
      <div id="box">
        <span></span>
      </div>  
      
    </body>
    
    </html>

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you need to support IE8 then yes the extra element will do the trick.

    If you need to support IE7 and 6 then you'd need another element also.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <meta charset="UTF-8">
    
    <!--css-->
    
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    #box{
    	margin:100px;
    	width:310px;
    	height:350px;
    	position:relative;
    }
    #box div{
    	background:#fff;
    	width:310px;
    	height:350px;
    	border-radius:5px;
    	border:2px solid #aaa;
    	position:relative;
    	z-index:2;
    }
    #box span {
    	display:block;
    	background:url(http://www.ttmt.org.uk/shadow/shadow-left.png) 0 0 no-repeat;
    	width:310px;
    	height:48px;
    	position:absolute;
    	bottom:-47px;
    	z-index:-1;
    }
    </style>
    <title>Title of the document</title>
    </head>
    <body>
    <div id="box"><div></div><span></span> </div>
    </body>
    </html>


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
  •