z-index layers

Hi,

I am trying to accomplish this kind of effect where an image is placed over the edge of one or several divs.

I am using position:relative and z-index which works fine apart from the fact that the whole page is pushed down where the image would be (just inside the body) if I didn't position it with css and z-index.

Any idea how I could do this?

 

Z index i used when you positioning something absolute, so you need to positioned absolute. Here is one example:
#z_index{
position: absolute;
margin-left: -150px;
left: 50%;
top: +0px;
width: 300px;
height: 200px;
z-index: 1;
}

This will place div with width: 300px and height: 200px at the horizontal middle of the screen and by changing the top: +0px will be move vertical. Also you can change the horizontal positioning by changing left: 50% and you can place it where you like. For left: 50% don't use pixels use % so you wont have problems with different resolution.

 

Thanks! I will give that a try.

 

And something else i forgot, when you change the left: __%; also change the margin-left: ___px;

 

In the example image posted, it's more likely that they faked it using either images or background images.

Z-index is something to be used lightly and avoided when possible (as is positioning, esp absolute). Depending on what thing you need to place "above" other things, you may be able to fake it. Faking it, esp with CSS, is usually the better way (but it depends).