css - z-index not working

Question

I have this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>

    <style>
    .avatardiv{width:48px;height:48px;z-index:20}
    .avatardiv a{width:48px;height:48px}
    .postdiv{width:100%;margin-top:-48px;z-index:10}
    </style>

</head>

<body>

<div class="avatardiv"><a href="http://google.com"><img src="" /></a></div>
<div class="postdiv">test test test test test test test test test test ....</div>

</body>
</html>

z-index of avatardiv not working in firefox. I can click on img in IE but can not click on it in FireFox.

any solution?

Answer 1

use position:relative property where you are using z-index, i hope it will work

    <style>
    .avatardiv{width:48px;height:48px;z-index:20;position:relative}
    .avatardiv a{width:48px;height:48px}
    .postdiv{width:100%;margin-top:-48px;z-index:10;position:relative}
    </style>

Answer 2

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

css - z-index not working

Question

2 answers

solution1
2 2013-09-01 09:37:25

solution2
1 2013-09-01 09:38:45

css - z-index not working

Question

2 answers

solution1 2 2013-09-01 09:37:25

solution2 1 2013-09-01 09:38:45

solution1
2 2013-09-01 09:37:25

solution2
1 2013-09-01 09:38:45