Trouble with text over an image in IE
I have some trouble putting just simple text over an image in IE. The image has a lower z-index than the text so I am not sure what it can be. I also tried to giv开发者_如何学Pythone the text a relative position rather than a absolute one. But it’s still not working. Has anybody please any ideas??
Thanks
IE doesn't handle z-index as the standard states. The best solution is to put the image as a background-image property to a container (for example a div) and the text inside that div. This way all the browsers recognize the correct order.
The second solution is to place both the img and the span (containing the text) in a div with the following properties:
<div style="position:relative">
<img src="a.jpg" style="position:absolute;" />
<span style="position:absolute">your text here</span>
</div>
Put the image and text in a div container set to 'relative' position. Set the image to position 'absolute' The text will appear ontop of the image
To control the text put it in another div and use the margin property to move it.
<div id="container" style="position: relative;">
<img style="position: absolute;" src="#" />
<div id="textcontainer" style="margin: 10px 10px 10px 10px">
Text to float on image here
</div>
</div>
No need for z-index :) Different versions of IE don't like it anyway.
<img src="myimage.jpg" title="Text over image here">
精彩评论