css - bootstrap - title html attribute

¿Cómo hacer que una Div aparezca sobre todo lo demás en la pantalla?

Question

Tengo la siguiente ventana emergente:

Pero cuando muevo esta ventana emergente para aparecer sobre el mapa, se oculta:

He intentado establecer el índice z en mi hoja de propiedades CSS, pero esto no funcionó.

¿Hay alguna propiedad HTML / CSS que pueda configurar para que la ventana emergente, que es un DIV, en realidad siempre se coloque encima de todo lo demás?

Answer 1

¿Estás utilizando position: relative ?

Intente establecer position: relative y luego el índice z porque desea que este div tenga un índice z en relación con otro div.

Por cierto, su navegador es importante para comprobar si funciona o no. Ni IE ni Firefox son buenos.

Answer 2

Establezca el índice z del DIV en uno más grande que los otros DIV. También deberás asegurarte de que el DIV tenga una position distinta a la static .

CSS:

#someDiv {
    z-index:9; 
}

Lea más aquí: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

Answer 3

Intente establecer la posición en absoluto, es decir.

#yourDiv{
    position: absolute;
    z-index: 10;
};

Answer 4

Una forma de hacer esto es insertar el panel que desea expandir dentro de un DIV configurado como relativo: le mostraremos:

<div style="position:relative">
  <div style="position:absolute; z-index: 1000;">
    your code
  </div>
<div>

Utilice el primer div para colocar el contenido interno en un área específica dentro de su página y el segundo absoluto debe referirse al contenedor (porque es relativo) El índice z en este caso también se refiere al contenedor y si es más alto que el El contenedor debe estar en la parte superior. Puede poner el estilo en una clase css y cambiar el tamaño del div absoluto para expandirlo al pasar el mouse u otra acción que desee controlar.

Espero que esta ayuda.

Answer 5

debe usar position:fixed para hacer que z-index valores del z-index apliquen a su div

Answer 6

los menús desplegables siempre aparecen en la parte superior, la única solución para este problema es ocultar los menús desplegables cuando se muestra la imagen (pantalla: bloque o visibilidad: visibile) y mostrarlos cuando la imagen está oculta (pantalla: ninguno o visibilidad: oculta)

Answer 7

z-index no es tan simple amigo. En realidad no importa si pones z-index:999999999999 ..... Pero importa CUANDO le hayas dado ese z-index . Diferentes elementos dom también tienen prioridad unos sobre otros.

Hice una solución en la que utilicé jQuery para modificar los elementos css y le di el z-index solo cuando necesitaba que el elemento estuviera en la parte superior. De esa manera podemos estar seguros de que el z-index de este elemento se ha dado en último lugar y se anotará el índice. Sin embargo, este requiere alguna acción para ser manejada, pero en su caso parece ser posible.

No estoy seguro de si esto funciona, pero también puedes intentar dar el parámetro !important :

#desired_element { z-index: 99 !important; }

Referencia philipwalton.com