1
Ich habe Probleme mit Z-Index und die Kompatibilität mit allen Browsern außer IE, das erste, was ich versuchte, war alle Positionen setzen, aber kein Glück, hoffentlich jemand mit mehr Erfahrung als ich kann mir helfen. Bitte besuchen Sie den Link den Code https://jsfiddle.net/my3hr7dv/2/Z-Index funktioniert nur auf einem IE-Browser
#container {
\t width: 100%;
\t height: 100%;
\t overflow: auto;
}
#header {
\t width: 80%;
position: absolute;
\t padding-left: 10%;
\t padding-right: 10%;
\t z-index: 2;
}
#leftNav {
\t float: left;
\t width: 20%;
\t height: 90%;
\t background-color: #03f;
\t border-right: 1px dashed #694717; \t /* Delete once layout has been set */
\t z-index: 1;
}
#rightNav {
\t float: right;
\t width: 20%;
\t height: 90%;
\t background-color: #03f;
\t border-left: 1px dashed; \t /* Delete once layout has been set */
\t z-index: 1;
}
#canvas {
\t margin:auto;
\t width: 60%;
\t position: relative;
}
#footer {
\t clear: both;
\t background-color: #867E7E;
\t height: 0%;
}
body {
\t margin: 0px;
\t padding: 0px;
\t width: 100%;
\t 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 {
\t width: 100%;
\t height: 2%;
\t background-color: #111;
\t position: relative;
}
svg{
\t z-index: 3;
\t position: relative;
}<!DOCTYPE HTML SYSTEM>
<html>
<head>
\t <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
\t <div id="container">
\t \t <div id="top"></div>
\t \t <div id="header">
\t \t \t <nav>
\t \t \t \t <ul>
\t \t \t \t \t <li><a class="active" href="#home">Home</a></li>
\t \t \t \t \t <li><a href="#news">News</a></li>
\t \t \t \t \t <li><a href="#contact">Contact</a></li>
\t \t \t \t \t <li><a href="#about">About</a></li>
\t \t \t \t </ul>
\t \t \t \t <svg height="100%" width="100%">
\t \t \t \t <circle cx="50%" cy="-20" r="40" stroke="white" stroke-width="3" fill="black" />
\t \t \t \t </svg>
\t \t \t </nav>
\t \t </div>
\t \t <div id="leftNav">This is the sites leftnav</div> \t
\t \t <div id="rightNav">This is the sites rightnav</div> \t
\t \t <div id="canvas"></div>
\t </div>
</body>
</html>Bitte beachten Sie einige der Seite zu finden, wird auf js Geige abgeschnitten, aber dies geschieht nicht in den Browsern Ich verwende. Vielen Dank im Voraus.
'' ist kein gültiger Doctype, ich bin mir ziemlich sicher. Wenn Sie HTML5 wollen, sollten Sie '' verwenden. Wie auch immer, was genau ist dein Problem? "Probleme mit dem Z-Index haben" ist nicht sehr klar. – TylerH
Auch hier ist keine Frage. Was genau ist das Problem? –
Für was es wert ist, können Sie 'z-index' nicht auf SVG-Elementen verwenden; Sie sind so konzipiert, dass sie per Bestellung im DOM platziert werden können. – TylerH