Battle of the positions

Introducing the problem outlined in my article

The problem arised when setting a background-image to a div which should appear directly below another div which was floated left. The div with the background-image would be moving all over the page via some nifty jQuery, so it was an integral part of the page. Below, I shall explain some of the caveats which you could possibly find yourself in and how to remedy the situation (and it is a really simple fix, as they always are!).

The HTML code

<div class="container">
	<div id="behind">
		<p>#behind-1</p>
	</div>
	<div id="in-front">
		<p>#in-front-1</p>
	</div>
</div>

Test 1 — #in-front-1 has no styling, and #behind-1 is made absolute

#behind-1

#in-front-1

#in-front-1 { /** Nothing to see here **/ }
#behind-1 {
	position: absolute;
	top: .25em;
	left: 15em
}

Test 2 — give #in-front-2 a higher z-index

#behind-2

#in-front-2

#in-front-2 {
	z-index: 2
}
#behind-2 {
	position: absolute;
	z-index: 1;
	top: .25em;
	left: 15em
}

Test 3 — change #in-front-3's position to relative

#behind-3

#in-front-3

#in-front-3 {
	position: relative;
	z-index: 2
}
#behind-3 {
	position: absolute;
	z-index: 1;
	top: .25em;
	left: 15em
}

Conclusion

And so we can conclude that setting any kind of position automatically places it above other un-positioned elements. One way we can combat this is to set the in-front div to relative and give it a higher z-index. It's then as happy as Larry.