Ответы:
Чтобы z-index работал, вам нужно указать элемент a position:absolute
или position:relative
свойство. Как только вы это сделаете, ваши ссылки будут работать правильно, хотя вам, возможно, впоследствии придется немного подправить свой CSS.
Для z-index:1000
получения эффекта вам нужна нестатическая схема позиционирования.
Добавить position:relative;
в правило, выбрав элемент, который должен быть наверху
Да, чтобы z-index работал, вам нужно присвоить элементу свойство position: absolute или position: relative.
Вы должны подняться по узлам элементов, чтобы проверить, имеют ли на уровне общего родителя первые потомки определенный z-индекс.
Все остальные потомки никогда не могут быть на переднем плане, если у основания есть более низкий определенный z-индекс.
В этом примере фрагмента div1-2-1 имеет z-index, равный 1000, но, тем не менее, находится под div1-1-1, у которого z-index равен 3.
Это потому, что у div1-1 z-index больше, чем у div1-2.
.div {
}
#div1 {
z-index: 1;
position: absolute;
width: 500px;
height: 300px;
border: 1px solid black;
}
#div1-1 {
z-index: 2;
position: absolute;
left: 230px;
width: 200px;
height: 200px;
top: 31px;
background-color: indianred;
}
#div1-1-1 {
z-index: 3;
position: absolute;
top: 50px;
width: 100px;
height: 100px;
background-color: burlywood;
}
#div1-2 {
z-index: 1;
position: absolute;
width: 200px;
height: 200px;
left: 80px;
top: 5px;
background-color: red;
}
#div1-2-1 {
z-index: 1000;
position: absolute;
left: 70px;
width: 120px;
height: 100px;
top: 10px;
color: red;
background-color: lightyellow;
}
.blink {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
.rotate {
writing-mode: vertical-rl;
padding-left: 50px;
font-weight: bold;
font-size: 20px;
}
<div class="div" id="div1">div1</br>z-index: 1
<div class="div" id="div1-1">div1-1</br>z-index: 2
<div class="div" id="div1-1-1">div1-1-1</br>z-index: 3</div>
</div>
<div class="div" id="div1-2">div1-2</br>z-index: 1</br><span class='rotate blink'><=</span>
<div class="div" id="div1-2-1"><span class='blink'>z-index: 1000!!</span></br>div1-2-1</br><span class='blink'> because =></br>(same</br> parent)</span></div>
</div>
</div>
Вам нужно добавить position:relative;
в меню. Z-index работает только при нестатической схеме позиционирования.
z-index
свойство позволяет вам взять под свой контроль впереди. чем большее число вы устанавливаете, тем выше ваш элемент.
position
свойство должно быть, relative
потому что положение html-element
должно быть расположено относительно других элементов управления во всех измерениях.
element.style {
position:relative;
z-index:1000; //change your number as per elements lies on your page.
}
Я предполагал, что вы делаете всплывающее окно с кодом из школы Третьей мировой войны, верно? проверьте это css. .modal, там уже z-index
есть слово . просто измените с 1 на 100.
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}