css - 如何在不使链接失效的情况下控制 HTML/CSS 中的分层？

Question

对于网站：

http://68.50.243.1/wunhopkuendo/

我正在尝试使图像轮播显示在左上角的绿色横幅下。如果我将轮播上的 z-index 设置为 -1，则左/右按钮不起作用。但是，如果我在横幅上将 z-index 设置为 999999，它不会出现在轮播上方。我怎样才能做到这一点？谢谢！

JS Fiddle 位于：

http://jsfiddle.net/3ZSBh/

Answer 1

“z-index”往往适用于position应用了相同类型的元素。

http://jsfiddle.net/CqnH4/1/

您可以将以下内容应用于您的 CSS：

.navbar {
    position:relative;
    z-index:999;
    height: 50px;
    background:#ff0;
}

#content{
    position:relative;
    z-index:1;
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
}

这将使导航栏保持在内容之上...当然，您不需要指定 a z-indexof 999...您可以简单地使用2.

Answer 2

只需添加position: relative图像。

<a class="brand" href="#">
    <img src="http://68.50.243.1/wunhopkuendo/img/logo.png"
         style="z-index: 99; position: relative;" />
</a>

这背后的原因是，z-index作品仅在positioned 元素上，而不是static.

小提琴：http: //jsfiddle.net/3ZSBh/1/