Question

我有这个：

<!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>

avatardiv的z-index在firefox中无效。我可以点击IE浏览器中的img，但无法在FireFox中点击它。

任何解决方案？

Answer 1

使用position：你使用z-index的相对属性，我希望它能正常工作

    <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

注意：z-index仅适用于定位元素（位置：绝对值， position：relative，或position：fixed）。

css - z-index无效

2 个答案: