z-index not working on relatively positioned elements - html

Question

Given 2 elements positioned relatively inside a relatively positioned parent, how do I get the elements to respect their z-index?
HTML:
<div class="content">
<img src="http://placekitten.com/100/100" alt="" class="preview">
<img src="http://placekitten.com/200/200" alt="" class="full">
</div>
CSS:
.content {
position:relative;
z-index:1;
outline:1px solid blue;
}
.preview {
z-index:1;
position:relative;
outline:1px solid yellow;
}
.full {
z-index:2;
position:relative;
outline:1px solid green;
}
JSFiddle: http://jsfiddle.net/2Nz2g/1/
I'm trying to get the .full element to be placed overtop the .preview element, so that basically .full elements position isn't affected by the .preview element at all.
I've tried floating the elements to no avail. Positioning absolutely is not an option as it totally throws off the position. Setting top:0;left:0 also has no effect.

Answer 1

I've had some cases where if an element is rendered after another, some browsers may ignore the z-index and draw them as they would do normally. In this cases you should set the z-index to a negative (<0) value to force them to be under the next elements:
Take a look at this fiddle, where all z-indexes are positive:
HTML:
<div id="first"></div>
<div id="second"></div>
CSS:
#first {
width: 200px;
height: 100px;
background: red;
z-index: 10;
}
#second {
width: 200px;
height: 100px;
background: blue;
position: relative;
top: -30px;
left: 40px;
z-index: 1;
}
Here the second div is rendered on top of the first one no matter what z-index I specify.
But take a look at this one:
HTML:
<div id="first"></div>
<div id="second"></div>
CSS:
#first {
width: 200px;
height: 100px;
background: red;
z-index: 10;
}
#second {
width: 200px;
height: 100px;
background: blue;
position: relative;
top: -30px;
left: 40px;
z-index: -1;
}
As you can see I only set the second element's z-index to -1 and now it's rendered properly.
This was tested on Google Chrome 35. You may want to check this bug on other browsers.

Answer 2

Is possible for you set a top / left /rigth positions to move the div
Css:
.content {
position:relative;
z-index:1;
outline:1px solid blue;
}
.preview {
z-index:1;
position:relative;
outline:1px solid yellow;
}
.full {
top:20px;
right:20px;
z-index:2;
position:relative;
outline:1px solid green;
}
http://jsfiddle.net/2Nz2g/4/

Answer 3

This can be fixed by using position: relative on the parent div and position: absolute on the images. This forces the images to be aligned on top of each other
JSFiddle: http://jsfiddle.net/yL5Sf/