:after and z-index

HTML & CSS
1

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


  <!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

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

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

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.


<!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

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


<!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

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.


<!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>
7