Question

有问题的网页：

http://meyers.ipalaces.org/sitemap/

第一个<LI>应该是z-index: 2;，并且应该位于任何其他<LI>之上。（迈尔斯）

CSS：

.sitemap #primaryNav > ul > li {
    float: none;
    background: #ffffff url('images/L1-left.png') center bottom no-repeat;
    z-index: 2;
    position: relative;
}

这个想法是#fff的背景颜色应该在下面<LI>的顶部，因此产生类似的效果：

http://astuteo.com/slickmap/demo/

如果您在上述链接上使用firebug并禁用position:relative 来自#primaryNav #home你会看到它看起来像我的。我不知道如何让它像他们一样。

Answer 1

我要指出的第一件事是，在您的情况下，“home”不是站点地图中的原点。虽然可能希望它在视觉上看起来那样，但在语义上并非如此。 SlickMap理解这一点（或许他们很幸运），这就是为什么在他们的html中“home”li与其他主页面处于同一级别。其他页面上面唯一的东西是root，它没有页面（虽然大多数人将root重定向到“主页”）。

其次，一旦父亲的z-index被设置，除非将孩子设置为position: absolute而父母设置为position: relative，否则所有孩子都是在堆叠顺序方面考虑开始高于父级的一级。这在9.9.1 Specifying the stack level: the 'z-index' property下的CSS 2.1标准中定义为（强调我的）：

根据堆叠上下文描述渲染树在画布上绘制的顺序。 堆叠上下文可以包含更多堆叠上下文。堆叠上下文从其父堆叠上下文的角度来看是原子的; 其他堆叠上下文中的框可能不在它的任何框之间。

所以，虽然SlickMap能够告诉你：

第一个<LI>应为z-index: 2;，并且应该位于任何其他<LI>之上。

在你的设计中，这样做并没有什么区别，因为向上移动第一个li可以移动它的所有孩子。并且，由于你家中的孩子们开始自己的堆叠环境比父母高一级，你的“家”可能永远不会高于其中的物品。

现在已经不在了。我使用SlickMap代码查看了您的代码，以了解其中的差异。正如您在下面所看到的，这里只有一个合理的选择，即100％兼容。

z-index确实支持负数但是，由于“home”和它的兄弟之间的堆叠上下文不同，所以你不能在这里使用它。但是，如果“home”的每个孩子都设置为position: absolute且“home”li设置为position: static（默认设置），则在某些边缘情况下，您可以使用{{ 1}}对这些孩子并使他们看起来在父母身后。但是，您还必须提供其他变量（例如父母的父母的背景是透明的） AND ，最重要的是，您必须手动定位每个孩子。显然这不是一个好主意。更不用说z-index: -1中的否定词在IE6 / 7中是错误的。

您需要做的是，正如SlickMap所做的那样，将z-index包含“home”下的第一个ul与li合并。这将产生以下层次结构：

ul.level--0

然后，您应该可以将ul --Home --Meyers --Another Level --M.... --Another Level --etc应用于“主页”z-index: 2，您将获得所需的结果。显然，结构的变化也可能需要对你的风格进行其他改变。

CSS 3属性可能有一些方法可以帮助你，但我不想进入，因为我不确定你的要求。

希望CSS布局strcutres中的这一课有助于您做出有关如何推进项目的明智决策。如果您对我所说的内容有任何疑问，请告诉我。

Answer 2

定位和z-index将没有任何用处，如果您尝试带到顶层的<li>实际上带有整个站点地图。*

使用Astuteo的代码并排查看页面的来源。有几个地方您真的更改了标记：

Astuteo:     <ul id="primaryNav"> /* using natural block tags */
Meyers: <div id="primaryNav"><ul class="level--0"> /* wrapping without need */

Astuteo:      <li id="home"><a href....>Home</a></li> /* CLOSED li (immediately) */
*Meyers:  <li><a href...>Home</a>...the entire sitemap...</li> /* you wrapped the entire site map inside your first <li> */

您所需的解决方案基本上反映了原始代码。此时重写或复制/粘贴可能比跟踪语法修改和/或布局策略中的剩余错误耗时更少。

编辑：您是否尝试过像删除家中第一个孩子的背景属性一样简单的事情？

<ul class="level--1">
    <li style="background: none">...

在CSS中会出现类似的情况（将CSS保留在HTML之外）：

.level--1 li:first-child { background:none; }

Answer 3

嗯，花了一段时间锻炼，但我想我现在已经有了。我必须说，由于页面does not validate。

，我的蜘蛛侠意识很高

这不是一个真正的z-index问题，因为你正在使用第三方（也是最优秀的！）框架来设计HTML格式 - SlickMap CSS应该像宣传的一样工作。

问题不在于无效标记，尽管无论如何都应该修复。即，缺少</li>代码，<br>中的utilityNav无效，主primaryNav中的ID属性重复。

问题是你引入了额外的<ul>级别，而且CSS规则再也不匹配正确的元素。这是出于任何原因需要吗？我可以看到，这已经尝试通过向CSS添加子选择器来纠正，但是标记与框架期望的完全不同，因此z-index堆叠不正确。

使用最小<ul> this demo可以正常工作，因为HTML对于SlickMap CSS是正确的。因此，我尝试从标记中删除额外的<ul>级别，并模仿SlickMap demo page或我的小提琴上的标记。

希望这会有所帮助：）

Answer 4

父母需要相对于获得正确的z-index堆叠上下文的位置。超级模糊，但也许这对你有用吗？

尝试阅读此链接以更好地了解确定DOM元素堆叠优先级的（超级模糊，无错误）方法：

https://developer.mozilla.org/En/Understanding_CSS_z-index/The_stacking_context

z-index工作不正常

4 个答案: