Respuestas:
Para que el índice z funcione, deberá asignar al elemento position:absolute
una position:relative
propiedad o una propiedad. Una vez que lo hagas, tus enlaces funcionarán correctamente, aunque es posible que tengas que modificar un poco tu CSS después.
por z-index:1000
tener un efecto, necesita un esquema de posicionamiento no estático.
Agregar position:relative;
a una regla seleccionando el elemento que desea que esté en la parte superior
Sí, para que el índice z funcione, necesitará darle al elemento una posición: absoluta o una posición: propiedad relativa.
Tienes que subir los nodos de los elementos para comprobar si a nivel del padre común los primeros descendientes tienen un índice z definido.
Todos los demás descendientes nunca pueden estar en primer plano si en la base hay un índice z definido más bajo.
En este ejemplo de fragmento, div1-2-1 tiene un índice z de 1000 pero, sin embargo, está por debajo de div1-1-1 que tiene un índice z de 3.
Esto se debe a que div1-1 tiene un índice z mayor que 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>
Necesita agregar position:relative;
al menú. Z-index solo funciona cuando tiene un esquema de posicionamiento no estático.
z-index
La propiedad le permite tomar su control al frente. cuanto mayor sea el número que establezca, más alto obtendrá su elemento.
position
La propiedad debería ser relative
porque la posición de html-element
debería ser la posición relativa frente a otros controles en todas las dimensiones.
element.style {
position:relative;
z-index:1000; //change your number as per elements lies on your page.
}
Asumiré que estás haciendo una ventana emergente con el código de la escuela de la Tercera Guerra Mundial, ¿correcto? compruébalo css. el .modal, ya z-index
hay palabra allí. simplemente cambie de 1 a 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 */
}