Html z-index 无法正常工作

z-index not working right

提问by ParoX

Page in question:

有问题的页面：

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

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

The first <LI>should be z-index: 2;and should be on top of any other <LI>further down. (Meyers)

第一个<LI>应该z-index: 2;并且应该在任何其他<LI>更下方的顶部。（迈耶斯）

CSS:

CSS：

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

The idea is that the background color of #fff should be ontop of the <LI>'s below, therefore creating an effect similar to this:

这个想法是#fff 的背景颜色应该在<LI>下面的之上，因此创建类似于以下的效果：

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

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

if you use firebug on the above link and disable position:relativefrom #primaryNav #homeYou'll see that it looks like mine. I am not sure how to get it to be like theirs.

如果你使用上面的链接，萤火虫和禁止position:relative从#primaryNav #home你会看到，它看起来像我的。我不知道如何让它像他们一样。

采纳答案by Dawson

Positioning and z-index won't be of any use, if the <li>you're trying to bring to the top layer is actually bringing the entire site map with it.*

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

Look at the source of your page side by side with Astuteo's code. There are a couple of places that you REALLYchanged the markup:

与 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> */

Your desired solution essentially mirrors the original code. A rewrite or copy/paste at this point would probably be less time consuming than tracking down the remaining errors in syntax modification and/or layout strategy.

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

EDIT: have you tried something as simple as...removing the background property for the first-child of home?

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

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

It would be something like this in your CSS (to keep your CSS out of your HTML):

在你的 CSS 中应该是这样的（为了让你的 CSS 远离你的 HTML）：

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

回答by Kevin Peno

First thing I would point out is that, in your case, "home" is not the origin in the sitemap. While might want it to seem that way visually, semantically this is not the case. SlickMapunderstands this (or maybe they just got lucky), which is why in their html the "home" liis at the same level as the other primary pages. The only thing above other pages is the root, which has no page (though most people redirect root to the "homepage").

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

Second, once a parent's z-indexis set, unless the child is set to position: absoluteand the parent is notset to position: relative, all children are considered to startone level above the parent in regards to stacking order. This is defined in the CSS 2.1 standard under 9.9.1 Specifying the stack level: the 'z-index' propertyas (emphasis mine):

其次，一旦父母的z-index设置，除非孩子被设置为position: absolute与父不设置position: relative，所有的孩子都被认为开始父的上一级的问候堆叠顺序。这在 CSS 2.1 标准中的9.9.1 指定堆栈级别下定义：“z-index”属性为（强调我的）：

The order in which the rendering tree is painted onto the canvas is described in terms of stacking contexts. Stacking contexts can contain further stacking contexts. A stacking context is atomic from the point of view of its parent stacking context;boxes in other stacking contexts may not come between any of its boxes.

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

So, while SlickMapwas able to tell you:

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

The first <LI>should be z-index: 2;and should be on top of any other <LI>further down.

第一个<LI>应该z-index: 2;并且应该在任何其他<LI>更下方的顶部。

In your design doing so makes no difference because moving the first liupwards moves all of it's children with it. And, since the children in your home block start their own stacking context one level higher than the parent, your "home" li can never be above the items inside it.

在您的设计中，这样做没有区别，因为li向上移动第一个会移动它的所有子项。而且，由于您的 home 块中的孩子们开始自己的堆叠上下文比父级高一级，因此您的“家” li 永远不会高于其中的物品。

Now that that is out of the way. I reviewed your code with the SlickMapcode to understand the differences. As you can see below, there is pretty much only one reasonable option here that is going to be 100% compatible.

现在，那是不可能的。我使用SlickMap代码查看了您的代码以了解差异。正如您在下面看到的，这里几乎只有一个合理的选项可以 100% 兼容。

z-indexdoes support negative numbers but, since the stacking context is different between "home" and it's siblings, you cannot use that here. However, if each child of "home" was set to position: absoluteand the "home" liwas set to position: static(the default) you could, in some edge cases, use z-index: -1on those children and make them appear to be behind the parent. But, you have to have other variables available as well (such as the parent's parent's background being transparent) AND, most importantly, you would have to position each child manually. Clearly this is not a good idea. Not to mention negatives in z-indexis buggy in IE6/7.

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

What you need to do is, as SlickMapdid, merge the first ulunder the licontaining "home" with ul.level--0. This will result in the following hierarchy:

你需要做的是，为SlickMap一样，合并第一ul下li含“家”用ul.level--0。这将导致以下层次结构：

ul
--Home
--Meyers
    --Another Level
--M....
    --Another Level
--etc

Then, you should be able to apply z-index: 2to the "home" liand you will get the result you are looking for. Obviously, the change in structure will likely require other changes to your styles as well.

然后，您应该可以向z-index: 2“家”申请li，您将得到您想要的结果。显然，结构的变化也可能需要对您的样式进行其他更改。

There are probably some ways that CSS 3 properties could help you, but I dont want to get into that as I'm unsure your requirements.

CSS 3 属性可能在某些方面可以帮助您，但我不想深入研究，因为我不确定您的要求。

Hopefully this lesson in CSS layout strcutres was helpful enough for you to make an informed decision on how to move forward with your project. If you have any addition questions about what I've said, just let me know.

希望 CSS 布局 strcutres 中的这一课对您有足够的帮助，可以让您就如何推进项目做出明智的决定。如果您对我所说的还有任何其他问题，请告诉我。

回答by andyb

Well, it took a while to work out but I think I have it now. I must say that my Spidey sense was on high due to the fact that the page does not validate.

好吧，这需要一段时间才能解决，但我想我现在已经有了。我必须说我的蜘蛛侠感觉很高，因为页面没有验证。

This is not really a z-index problem since you're using a 3rd party (and most excellent!) framework to style the HTML - SlickMap CSSwhich should work as advertised.

这不是真正的 z-index 问题，因为您使用的是第 3 方（也是最出色的！）框架来设置 HTML 样式 - SlickMap CSS应该像宣传的那样工作。

The problem isn't with the invalid markup although that should be fixed regardless. Namely that there are missing </li>tags, there is an invalid <br>in the utilityNavand duplicate id attributes in the main primaryNav.

问题不在于无效标记，尽管无论如何都应该修复。即有遗漏的</li>标签，有一个无效<br>的utilityNav主和重复的ID属性primaryNav。

The problem is that you have introduced extra <ul>levels and the CSS rules just don't match the correct elements any more. Is this required for any reason? I can see that this has tried to be corrected by adding child selectors to your CSS, but the markup is radically different to what the framework expects and hence the z-index stacking isn't correct.

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

With a minimal <ul>this demoworks as expected since the HTML is correct for the SlickMap CSS. So I'd try and remove the extra <ul>levels from your markup and mimic the markup on the SlickMap demo pageor my fiddle.

由于HTML 对 SlickMap CSS 是正确的，因此<ul>这个演示可以按预期工作，最少。所以我会尝试<ul>从您的标记中删除额外的级别，并模仿SlickMap 演示页面或我的小提琴上的标记。

Hope this helps :)

希望这可以帮助 ：）

回答by Alex Mcp

The parent will need to have position relative to get a proper z-index stacking context. Super obscure, but maybe this will work for you?

父级需要有相对位置才能获得正确的 z-index 堆叠上下文。超级晦涩，但也许这对你有用？

Try reading through this link to get a better understanding of the (super obscure, no fault of yours) method of determining the stacking priority of DOM elements:

尝试通读此链接以更好地了解确定 DOM 元素堆叠优先级的（超级晦涩，没有错）方法：

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

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