Z-Index only working on a IE browser

Question

I am having trouble with z-index and the compatibility with all browsers except IE, the first thing I tried was setting all the positions but no luck, hopefully someone with more experience than I can assist me. Please visit the link to find the code 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>

please note some of the page gets cut off on js fiddle but this does not happen in the browsers I am using. Many thanks in advance.

` ` is not a valid doctype, I'm pretty sure. If you want HTML5 you should use ` `. Anyway, what, specifically, is your problem? "having trouble with z-index" isn't very clear. — TylerH, Apr 07 '16 at 12:41
For what it's worth, you can't use `z-index` on SVG elements; they're designed to be placed per their order in the DOM. — TylerH, Apr 07 '16 at 12:44
my problem is that the layering is only working on IE and not on chrome and firefox, as you can see on IE it works, however, it looks like this on the other browsers — Ryan Evans, Apr 07 '16 at 12:57

Marco Hengstenberg · Answer 1 · 2016-04-07T13:06:23.477

4

#leftNav and #rightNav are not positioned. Without position: relative or position: absolute on an element you can't use z-index (or more like: it won't have an effect).

Only with positioning the object absolutely or relatively you create a stacking context in which you can stack elements on top of each other with z-index.

Edit: In order to create a stacking context you could also go for position: fixed or (in suporting browsers) position: sticky. Or to turn the stick around: any position value will create a stacking context and you can use z-index in combination with it apart from position: static.

Edit2: If you wanted to put the SVG on top of the #header by setting some z-index on it, I have to tell you that this is impossible to do so. =( Unfortunately there is something in the spec explaining the issue: https://www.w3.org/TR/SVG2/render.html#RenderingOrder

edited Apr 07 '16 at 13:06

answered Apr 07 '16 at 12:43

Marco Hengstenberg

824
5
15

3

Any `position` other than `static` will do, actually. – TylerH Apr 07 '16 at 12:44
What do you want to achieve exactly? The `#header` needs to be on top of the two navs and the SVG needs to be on top of the `#header`. Right? – Marco Hengstenberg Apr 07 '16 at 12:51
1

@TylerH, meaning the position `fixed` will also do the job. In other words, the element must be placed out of flow in order the `z-index` can take effect. – skobaljic Apr 07 '16 at 12:52
1

@skobaljic Yes, and `position: sticky` in browsers that already support it. – TylerH Apr 07 '16 at 12:53
@skobaljic & TylerH you're both right, I'll add that to my comment. Thanks for pointing out. – Marco Hengstenberg Apr 07 '16 at 12:53
@TylerH, thanks for [sticky](https://developer.mozilla.org/en/docs/Web/CSS/position#Sticky_positioning) note, learned something new today. – skobaljic Apr 07 '16 at 12:59
These have been tried but makes no difference to the position of the circle gyazo.com/caa4a4d18698b2b1bc76ef6f2041b4f4 and like it should in IE gyazo.com/0db30fe98a8d1edf932a8d1d8cee7aa5 – Ryan Evans Apr 07 '16 at 13:08
@RyanEvans See my second edit. You can't position SVGs and stack them with z-index. You'd have to wrap the SVG inside a container and position that. Makes it a bit of a hassle but it's the only workaround I could think of at the moment. – Marco Hengstenberg Apr 07 '16 at 13:10
@MarcoHengstenberg i shall try that now thanks for your help – Ryan Evans Apr 07 '16 at 13:13
@RyanEvans happy to help =) – Marco Hengstenberg Apr 07 '16 at 13:16

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

Have a read at z-index stacking context.

Css z-index is a bit tricky and counter-intuitive until you really understand it

Also as tyler has said, you can't use z-index on svg-Tags see here. If you only need svg for the circle you could try

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

Demo

edited May 23 '17 at 11:50

Community

1
1

answered Apr 07 '16 at 12:45

Aides

3,643
5
23
39

Ended up using the circle you sent me with a few alterations, works perfectly now, svg was nice but not what I needed thanks for all the help =) – Ryan Evans Apr 07 '16 at 13:38
Upvote and correct answer would be appreciated in that case ;) – Aides Apr 07 '16 at 13:43

Z-Index only working on a IE browser

2 Answers2