Question

我遇到了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小提琴切断，但这不会发生在我正在使用的浏览器中。非常感谢提前。

Answer 1

#leftNav和#rightNav未定位。如果元素没有position: relative或position: absolute，则无法使用z-index（或者更像是：它不会产生影响）。

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

编辑：为了创建堆叠上下文，您还可以选择位置：固定或（在支持浏览器中）位置：粘性。或者转动棒：任何位置值都会创建堆叠上下文，除了position: static之外，您可以将z-index与它结合使用。

EDIT2：如果您想通过在其上设置一些z-index将SVG置于#header之上，我必须告诉您这是不可能的。 =（不幸的是，规范中有一些内容解释了这个问题：https://www.w3.org/TR/SVG2/render.html#RenderingOrder

Answer 2

请阅读z-index stacking context。

Css z-index有点棘手且反直觉，直到你真正理解它为止

正如泰勒所说，你不能在z-index - 标签see here上使用svg。如果您只需要svg用于圆圈，您可以尝试

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

Demo

Z-Index仅适用于IE浏览器

2 个答案: