I have a list of images in an html table and need to overlap a small icon on each image. How can we do this using z index and positioning?
A:
You could use position:relative and set right:30px, bottom:30px, that would shift it up and left by 30 pixels.
css:
.icon{ position:relative; right:30px; bottom:30px; }
noirenex
2009-11-23 11:38:11
+1
A:
The element you want to be on top needs to have a higher z-index
So the small icon would have a z-index of 2 and the images would have a z-index of 1
Example:
.icon {
z-index: 2;
position: relative;
left: 30px;
top: 30px;
}
.images {
z-index: 1;
}
zeckdude
2009-11-23 11:40:04
A:
Here is an guide about you can use z-index and here https://developer.mozilla.org/en/understanding%5Fcss%5Fz-index
an article about positioning http://www.tizag.com/cssT/position.php
Daniel
2009-11-23 11:40:39
A:
See here. http://jsbin.com/univa
<html>
<head>
<style type="text/css">
.under
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
.over
{
position:absolute;
left:40px;
top:10px;
z-index:-1;
}
</style>
</head>
<body>
<img src="http://www.prototypejs.org/images/codesample1.gif" width="184" height="46" class="under" />
<img src="http://mootools.net/assets/images/mootools.png" width="184" height="46" class="over" />
</body>
</html>
metal-gear-solid
2009-11-23 11:48:31
A:
I have done the similar thing here:
http://sarfraznawaz.wordpress.com/2009/09/09/creating-image-maps-using-css/
Sarfraz
2009-11-23 12:43:57
A:
HTML markup with inline CSS as follows:
<div style="position: relative;">
<div><img src="myimage.gif" width="200" height="200"></div>
<!-- THIS -->
<div style="position: absolute; left: 0; top: 0; z-index: 10;"><img src="l-t-overlay.gif" width="16" height="16"></div>
<!-- OR -->
<div style="position: absolute; right: 0; top: 0; z-index: 10;"><img src="r-t-overlay.gif" width="16" height="16"></div>
<!-- OR -->
<div style="position: absolute; left: 0; bottom: 0; z-index: 10;"><img src="l-b-overlay.gif" width="16" height="16"></div>
<!-- OR -->
<div style="position: absolute; right: 0; bottom: 0; z-index: 10;"><img src="r-b-overlay.gif" width="16" height="16"></div>
</div>
Salman A
2009-11-23 14:27:00