Clever z-index

[codingmasterRS]

Hi Guys,

 

I have images <img src="avatars/21.png" class="online" />

 

now class="online" SHOULD overlay a green box, but it is not currently, how can I fix this?

[codingmasterRS]

this is the CSS

	position: absolute;
background: #00FF00;
width: 7.5px;
height: 7.5px;
margin-top: 23px;
z-index: 5;

[mikesta707]

Please don't repost your questions. Especially don't repost them in the wrong board. This is the PHP help board. You probably want to post this in the css help forum. Doing a quick google search may also help you. I turned up with this: http://stackoverflow.com/questions/403478/css-how-to-overlay-images

 

you aren't trying to overlay a small image over a larger one, but the concept is pretty much the same. Just don't use the small image.

[codingmasterRS]

I wanted to avoid having to add a span etc, and just add a class to the <img>

[mikesta707]

dont know if thats possible. Im unaware of any CSS rules that would allow you to basically change how an image is rendered. The link a provided kind of spoofs this using absolute positioning of a span to position it over an image. This is what an overlay is.

[codingmasterRS]

See the reason I wanted to do it this way is that when AJAX detects the user goes offline the jQuery uses removeClass from the id and when it detects goes online just addClass. So its simple and neat rather than adding and removing SPAN or DIV. But if anyone has any suggestions or ways of doing it better that work, please suggest....

[mikesta707]

instead of using add/remove class you could just use hide/show