Z-Index仅适用于IE浏览器

我在z-index和除IE之外的所有浏览器的兼容性方面遇到了问题，我尝试的第一件事就是设置所有位置，但没有成功，希望有比我更有经验的人能帮助我。请访问链接查找代码https://jsfiddle.net/my3hr7dv/2/

#container {
	width: 100%;
	height: 100%;
	overflow: auto;
}
#header    {
	width: 80%;
    position: absolute;
	padding-left: 10%;
	padding-right: 10%;
	z-index: 2;
}
#leftNav {
	float: left;
	width: 20%;
	height: 90%;
	background-color: #03f;
	border-right: 1px dashed #694717;	/* Delete once layout has been set */
	z-index: 1;
}
#rightNav {
	float: right;
	width: 20%;
	height: 90%;
	background-color: #03f;
	border-left: 1px dashed;	/* Delete once layout has been set */
	z-index: 1;
}
#canvas {
	margin:auto;
	width: 60%;
	position: relative;
}
#footer {
	clear: both;
	background-color: #867E7E;
	height: 0%;
}
body {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #a3a3c2; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#a3a3c2, #d1d1e0); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#a3a3c2, #d1d1e0); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#a3a3c2, #d1d1e0); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#a3a3c2, #d1d1e0); /* Standard syntax */
}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: #111;
}
#top {
	width: 100%;
	height: 2%;
	background-color: #111;
	position: relative;
}
svg{
	z-index: 3;
	position: relative;
}

<!DOCTYPE HTML SYSTEM>
<html>
<head>
	<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div id="container">
		<div id="top"></div>
		<div id="header">
			<nav>
				<ul>
					<li><a class="active" href="#home">Home</a></li>
					<li><a href="#news">News</a></li>
					<li><a href="#contact">Contact</a></li>
					<li><a href="#about">About</a></li>
				</ul>
				<svg height="100%" width="100%">
				  <circle cx="50%" cy="-20" r="40" stroke="white" stroke-width="3" fill="black" /> 
				</svg> 
			</nav>
		</div>
		<div id="leftNav">This is the sites leftnav</div>	
		<div id="rightNav">This is the sites rightnav</div>	
		<div id="canvas"></div>
	</div>
</body>
</html>

请注意，js-fiddle上的一些页面被剪掉了，但在我使用的浏览器中不会发生这种情况。非常感谢。

#leftNav和#rightNav未定位。在元素上没有position: relative或position: absolute，就不能使用z索引（或者更像：它不会有效果）。

只有绝对或相对定位对象，才能创建一个堆叠上下文，在该上下文中，可以使用z索引将元素堆叠在一起。

编辑：为了创建堆叠上下文，您还可以选择position:fixed或（在支持浏览器中）position:fstick。或者扭转局面：任何位置值都会创建一个堆叠上下文，除了position: static之外，您可以将z索引与它结合使用。

第2版：如果你想通过在#header上设置一些z索引来将SVG放在它上面，我必须告诉你这是不可能的。=（不幸的是，规范中有一些内容解释了这个问题：https://www.w3.org/TR/SVG2/render.html#RenderingOrder

阅读z索引堆叠上下文。

在你真正理解它之前，Css z索引有点棘手，而且有点反直觉

正如tyler所说，你不能在svg上使用z-index-标签请参阅此处。如果你只需要svg的圆圈，你可以尝试

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

演示

相关内容

最新更新

热门标签：