当前位置：文江博客话题详情

Z-index 不起作用

发布于 2025-01-01 06:08:06 字数 358 浏览 1 评论 0原文

可能的重复：
CSS z-index 问题

我遇到一个问题，一个图像位于另一个图像和 z-index 的前面似乎没有改变它。我正在努力使徽标位于灰色条图像的顶部。

http://jsfiddle.net/vzPUw/

谁能向我解释为什么这不起作用？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一身软味 2025-01-08 06:08:06

z-index 仅适用于position：relative/absolute/fixed，因此请为您的徽标提供position:relative。

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

已更新

< a href="http://jsfiddle.net/vzPUw/3/" rel="nofollow noreferrer">http://jsfiddle.net/vzPUw/3/

在此，我更改了标记因为我们从来没有将 block 元素放在 inline 元素中。是一个 inline 元素 & h1 是一个block 元素。

回复收藏 0 原文

不可一世的女人 2025-01-08 06:08:06

z-index:0; 不是一个好的使用值。您应该至少使用 1。 1是窗座。从技术上讲，0 位于窗口下方。

您只需调用正确的元素（锚点而不是其中的图像），因为锚点是容器。然后是边距和放置位置的问题。

这里是 jsFiddle

回复收藏 0 原文

一个人的旅程 2025-01-08 06:08:06

看到这里我这里有变化......
-删除条形图像的 img 标签并放置标题标签的背景..:)
-这里我认为你不需要位置属性和 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>

see here i have change here...
-remove img tag for bar image and put background of header tag.. :)
-here i think you no need for position property and 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>

回复收藏 0 原文

~没有更多了~