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:

enter image description here

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

Popular posts from this blog

c# - how to write client side events functions for the combobox items -

exception - Python, pyPdf OCR error: pyPdf.utils.PdfReadError: EOF marker not found -