Css 仅在IE浏览器上使用Z索引

我在z-index和与除IE之外的所有浏览器的兼容性方面遇到了问题，我尝试的第一件事是设置所有位置，但没有运气，希望有比我更有经验的人能帮助我。请访问链接以查找代码

#容器{
宽度：100%；
身高：100%；
溢出：自动；
}
#标题{
宽度：80%；
位置：绝对位置；
左：10%；
右：10%；
z指数：2；
}
#左导航{
浮动：左；
宽度：20%；
身高：90%；
背景色：#03f；
右边框：1px虚线#694717；/*设置布局后删除*/
z指数：1；
}
#右导航{
浮动：对；
宽度：20%；
身高：90%；
背景色：#03f；
左边框：1px虚线；/*设置布局后删除*/
z指数：1；
}
#帆布{
保证金：自动；
宽度：60%；
位置：相对位置；
}
#页脚{
明确：两者皆有；
背景色：#867E7E；
身高：0%；
}
身体{
边际：0px；
填充：0px；
宽度：100%；
身高：100%；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景：#a3c2；/*适用于不支持渐变的浏览器*/
背景：-用于Safari 5.1至6.0的webkit线性梯度（#a3a3c2，#d1d1e0）；/**/
背景：-Opera 11.1至12.0的o型线性梯度（#a3a3c2，#d1d1e0）；/**/
背景：-Firefox 3.6到15版本的moz线性渐变（#a3a3c2，#d1d1e0）；/**/
背景：线性渐变（#a3a3c2，#d1d1e0）；/*标准语法*/
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李娜：停下来{
背景色：#111；
}
#顶{
宽度：100%；
身高：2%；
背景色：#111；
位置：相对位置；
}
svg{
z指数：3；
位置：相对位置；
}

这是网站的左导航
这是网站右导航

#leftNav

和

#righnav

未定位。 如果元素上没有

position:relative

或

position:absolute

，则不能使用z索引（或者更像：它不会产生效果）

只有绝对或相对地定位对象，才能创建堆叠上下文，在该上下文中，可以使用z索引将元素堆叠在彼此的顶部

编辑： 为了创建堆叠上下文，您还可以选择position:fixed或（在支持浏览器中）position:sticky。或者，若要扭转控制杆：任何位置值都将创建堆叠上下文，除了

position:static

，您还可以将z-index与之结合使用

编辑2： 如果您想通过在

#标题

上设置一些z索引来将SVG放在其顶部，我必须告诉您，这是不可能做到的=（不幸的是，规范中有一些东西解释了这个问题：

\leftNav

和

\righnav

没有定位。 如果元素上没有

position:relative

或

position:absolute

，则不能使用z索引（或者更像：它不会产生效果）

只有绝对或相对地定位对象，才能创建堆叠上下文，在该上下文中，可以使用z索引将元素堆叠在彼此的顶部

编辑： 为了创建堆叠上下文，您还可以选择position:fixed或（在支持浏览器中）position:sticky。或者，如果要旋转棍子：任何位置值都将创建堆叠上下文，并且除了

位置：static

之外，您还可以将z-index与之结合使用

编辑2： 如果您想通过在

#标题

上设置一些z索引来将SVG放在其顶部，我必须告诉您，这是不可能做到的。=（不幸的是，规范中有一些东西解释了这个问题：

请仔细阅读

cssz-index在您真正理解它之前是有点棘手和违反直觉的

---

正如泰勒所说，您不能在

svg

-标记上使用

z-index

。 如果圆只需要svg，可以尝试

.myCircleDiv
{
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

请阅读

cssz-index在您真正理解它之前是有点棘手和违反直觉的

---

正如泰勒所说，您不能在

svg

-标记上使用

z-index

。 如果圆只需要svg，可以尝试

.myCircleDiv
{
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

---

不是有效的doctype，我很确定。如果你想要HTML5，你应该使用

。总之，你的问题是什么？“z-index有问题”不太清楚。另外，这里也没有问题。到底是什么问题？无论如何，你不能在SVG元素上使用

z-index

；它们被设计为按照它们在DOM中的顺序放置。我的问题是，分层只在IE上有效，而不在chrome和firefox上有效，正如你在IE上看到的那样。但是，它看起来像这样其他浏览器上的不是有效的doctype，我很确定。如果你想要HTML5，你应该使用

。总之，你的问题是什么？“z-index有问题”不太清楚。另外，这里也没有问题。到底是什么问题？无论如何，你不能在SVG元素上使用

z-index

；它们被设计为按照它们在DOM中的顺序放置。我的问题是，分层只在IE上有效，而不在chrome和firefox上有效，正如你在IE上看到的那样。但是，它看起来像这样在其他浏览器上，除了静态的

之外，任何
位置的
实际上都可以。你到底想实现什么？
#header
需要位于两个导航的顶部，SVG需要位于
#header
的顶部。对吗？@TylerH，意思是位置
固定的
也可以完成这项工作。换句话说，必须将元素放置在流动之外，才能使
z-index
生效。@skobaljic Yes和
position:sticky
在已经支持它的浏览器中。@skobaljic&TylerH