Geek Answers Handbook

Z-index in the background? CSS

I have a couple of list items with a given height and width with a background that has borders with transparent middle parts. Each li contains an image.

<ul id="reel"> <li><img src="movie-image"></li> <li><img src="movie-image"></li> <li><img src="movie-image"></li> </ul>

CSS

 #reel { width:960px; height:270px;} #reel li { width:320px; height:327px; z-index:100; } #reel li img { z-index:98; }

I want background li to appear above the image. z-index, did not help. any suggestion?

+4
source share
4 answers

Try a pseudo-element. This assumes the image is 100 pixels per 100 pixels

 li { display:block; position:relative; height:100px; width:100px; } li:after { content:""; width:100px; height:100px; background-color:#000; display:inline-block; position:absolute; left:0; top:0; background: rgba(0, 0, 0, 0.6); }
+2
source

I suggest making an image li with an absolute position and an x ​​and y value minus 100 or more, since you need this to save the image li so that a background image appears. Something like below:

 #reel li { width:320px; height:327px; z-index:100; } #reel li img { position:absolute; left: -100px; top: -100px; }
+3
source

Nicolas

I think you are trying to do it wrong in the code.

Try something like this http://pastebin.com/7AnSxcEh

Give the same height and width for li and div. Also add positioning. so that you can set the order.

+1
source

Well, it looks like I found a solution to this problem,

 #reel { width:960px; height:270px;} #reel li { width:320px; height:327px; z-index:100; position:relative; } #reel li img { position:absolute; z-index:98; }

Thanks @adrian

0
source

More articles:


All Articles