Z-Index работает только в браузере IE

У меня возникают проблемы с z-index и совместимостью со всеми браузерами, кроме IE, первое, что я пробовал, - это установка всех позиций, но не удача, надеюсь, кто-то с большим опытом, чем я может помочь мне. Пожалуйста, перейдите по ссылке, чтобы найти код https://jsfiddle.net/my3hr7dv/2/Z-Index работает только в браузере IE

#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>

обратите внимание на некоторые страницы получает отрезана на Js скрипку, но это не происходит в браузерах я использую. Спасибо заранее.

источник

2016-04-07 Ryan Evans

'' не является допустимым доктайп, я уверен. Если вы хотите HTML5, вы должны использовать ''. Во всяком случае, какая именно проблема? «проблема с z-index» не очень ясна. – TylerH

Кроме того, здесь нет никаких вопросов. В чем именно проблема? –

Для чего вы не можете использовать 'z-index' для элементов SVG; они предназначены для размещения по их порядку в DOM. – TylerH

#leftNav и #rightNav не установлены. Без position: relative или position: absolute на элементе вы не можете использовать z-index (или больше похоже: он не будет иметь эффекта).

Только с позиционированием объекта абсолютно или относительно вы создаете контекст укладки, в котором вы можете складывать элементы друг над другом с помощью z-index.

Редактировать: Чтобы создать контекст укладки, вы также можете перейти на позицию: фиксированное или (в соответствии с браузерами) положение: липкое. Или повернуть палку вокруг: любое значение позиции создаст контекст стекирования, и вы можете использовать z-index в сочетании с ним, кроме position: static.

Редактировать 2: Если вы хотите поместить SVG поверх #header, установив на нем некоторый z-индекс, я должен сказать вам, что это невозможно сделать. = (К сожалению, есть что-то в спецификации, объясняющей вопрос:. https://www.w3.org/TR/SVG2/render.html#RenderingOrder

источник

2016-04-07 12:43:34

Любая 'позиция', кроме' static', будет делать, фактически. – TylerH

Это было суждено, но результата не было. –

Чего вы хотите добиться именно? «# header» должен быть поверх двух навигаторов, а SVG должен быть поверх «# заголовка». Правильно? –

Have чтения в z-index stacking context

Css г-индекс немного сложнее и нелогичным, пока вы не понимаете, это

Кроме того, как Tyler сказал, вы не можете использовать z-index на svg -Tags see here. Если вам нужно только SVG для круга можно попробовать

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

Demo

источник

2016-04-07 12:45:45 Aides

Закончив работу с кругом, который вы мне прислали с несколькими изменениями, теперь отлично работает, svg был приятным, но не тем, что мне нужно было спасибо за все help =) –

В этом случае будет оценен ответ и правильный ответ;) – Aides

Z-Index работает только в браузере IE

ответ

Смежные вопросы