有问题的页面:
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/
如果你使用上面的链接,萤火虫和禁止position:relative
从#primaryNav #home你会看到,它看起来像我的.我不知道如何让它像他们一样.
我要指出的第一件事是,在您的情况下,"home"不是站点地图中的原点.虽然可能希望它在视觉上看起来那样,但在语义上并非如此.SlickMap理解这一点(或者他们很幸运),这就是为什么在他们的html中"home" li与其他主页面处于同一级别.其他页面上面唯一的东西是root,它没有页面(尽管大多数人将root重定向到"主页").
其次,一旦父母的z-index设置,除非孩子被设置为position: absolute与父不设置position: relative,所有的孩子都被认为开始父的上一级的问候堆叠顺序.这在CSS 2.1标准9.9.1中指定堆栈级别定义:'z-index'属性为(强调我的):
根据堆叠上下文描述渲染树在画布上绘制的顺序.堆叠上下文可以包含更多堆栈上下文.从其父堆栈上下文的角度来看,堆叠上下文是原子的; 其他堆叠环境中的框可能不在其任何框之间.
所以,虽然SlickMap能够告诉你:
第一个
<LI>应该是z-index: 2;并且应该在任何其他<LI>进一步下降之上.
在你的设计中这样做没有任何区别,因为li向上移动它会使所有的孩子都用它移动.而且,由于你家中的孩子们开始自己的堆叠环境比父母高一级,你的"家"可能永远不会高于其内部的物品.
现在已经不在了.我使用SlickMap代码检查了您的代码,以了解它们之间的差异.正如您在下面所看到的,这里只有一个合理的选择是100%兼容.
z-index确实支持负数但是,由于"home"和它的兄弟之间的堆叠上下文不同,你不能在这里使用它.但是,如果将"home"的每个子项设置为position: absolute"home" li并将其设置为position: static(默认值),则在某些边缘情况下,您可以使用z-index: -1这些子项并使它们看起来位于父项后面.但是,你必须有可用的,以及(如父母的父母的背景是透明的)其他变量和,最重要的是,你必须给每个孩子手动定位.显然这不是一个好主意.更不用说负面因素z-index是IE6/7 中的错误.
你需要做的是,为SlickMap一样,合并第一ul下li含"家"用ul.level--0.这将导致以下层次结构:
ul
--Home
--Meyers
--Another Level
--M....
--Another Level
--etc
然后,您应该可以申请z-index: 2"家" li,您将获得您正在寻找的结果.显然,结构的变化也可能需要对你的风格进行其他改变.
CSS 3属性可能有一些方法可以帮助你,但我不想进入,因为我不确定你的要求.
希望CSS布局strcutres中的这一课有助于您做出有关如何推进项目的明智决策.如果您对我所说的内容有任何疑问,请告诉我.
定位和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; }