Question

i have two spans:

<span id="top" ><img src="top.png" /></span>
<span id="bottom" ><img src="bottom.png" /></span>

how can i have it where:

1. The top image overlaps over the bottom image
2. Make sure the top images shows up in front of the bottom image) (instead of behind it)
3. make sure that alignment is consistent across browsers

Answer 1

@ooo; you can give position:relative to your span because z-index works only on position absolute & relative right like this:

css:

span{position:relative;display:block}
#top{z-index:1;}
#bottom{margin-top:-20px}

html:

<span id="top" ><img src="top.png" /></span>
<span id="bottom" ><img src="bottom.png" /></span>