html - How to get a table to overlap an image? -
here small snippet of html:
<img src="http://hss.fullerton.edu/philosophy/red%20square.gif" id="test1" /> <table id="test2"> <tr><td>test</td></tr> </table>
i have image of red square , want table overlap bottom of it. here css:
#test1 { width: 42px; height: 42px; display: block; margin-left: auto; margin-right: auto; margin-bottom: -15px; } #test2 { z-index: 1; background-color: pink; width: 80px; height: 50px; margin-left: auto; margin-right: auto; }
it isn't working, however:
as can see, image still on top of table
- not want. notice in css i've explicitly set table's z-index
1
, still won't overlap image. doing wrong?
jsfiddle: http://jsfiddle.net/george_edison/uk7pz/
try positioning each element. add position:relative
each element, demonstrated here: http://jsfiddle.net/8ngkk/1/
Comments
Post a Comment