Z指数不起作用

时间:2012-02-02 07:40:46

标签: css z-index

  

可能重复:
  Css z-index problem

我有一个问题,其中一张图片在另一张图片的前面,z-index似乎没有改变它。 我试图让它成为标志位于灰色条形图像的顶部。

http://jsfiddle.net/vzPUw/

有人可以向我解释为什么这不起作用吗?

3 个答案:

答案 0 :(得分:6)

z-index仅适用于position : relative/absolute/fixed,因此请将position:relative提供给徽标

http://jsfiddle.net/vzPUw/1/

<强>更新

http://jsfiddle.net/vzPUw/3/

在此,我更改了标记,因为我们从未将block元素放在inline元素中。 <a>是一个inline元素&amp; h1block元素。

答案 1 :(得分:1)

z-index:0;不是一个很好的使用价值。你应该至少使用1。 1是窗口基座。 0在技术上低于窗口。

你只需要调用正确的元素(锚点而不是其中的图像),因为锚点是容器。然后是利润率和安置位置问题。

jsFiddle Here

答案 2 :(得分:0)

看到这里我有变化...... -remove img tag for bar image and put background of header tag .. :) - 我觉得你不需要位置属性和z-index .. :)

<html>
<head>
    <title>Ankur Patel</title>
</head>
<body style="width: 100%">
<header style="background-image: url('http://dl.dropbox.com/u/14080718/Final/images/bars.gif');background-repeat: repeat-x;">

    <a>
        <img alt="" src="http://dl.dropbox.com/u/14080718/Final/images/rocketdesign.png">
    </a>
    </header>
</body>
</html>