Implementé un cuadro emergente que muestra dinámicamente las opciones de búsqueda. Quiero que la caja "flote" sobre todo el contenido del sitio. Actualmente, cuando se muestra el cuadro, desplaza todo el contenido debajo y se ve mal.Float a div sobre el contenido de la página
Creo que ya he intentado configurar el índice z de la div del cuadro por encima del resto del contenido de la página, pero todavía no hay suerte.
Quiere usar absolute positioning.
Un elemento posición absoluta es posicionado con respecto al elemento padre primero que tiene una posición distinta de estática. Si no se encuentra dicho elemento , el bloque que contiene es html
Por ejemplo:
.yourDiv{
position:absolute;
top: 123px;
}
Para conseguir que funcione, el padre tiene que ser relativa (position:relative)
En su caso esto debería hacer el truco:
.suggestionsBox{position:absolute; top:40px;}
#specific_locations_add{position:relative;}
¡Gracias, el posicionamiento absoluto resolvió mi problema! –
@MrBoJangles actualizó la respuesta para usar su enlace. La respuesta es 4 años, era una hora diferente ^^ – marcgg
Notas para la pareja: es necesario especificar una coordenada superior y/o izquierda o esto no parece funcionar. También tenga cuidado si quiere que su div esté "en la pantalla", ya que a veces las páginas web no siempre muestran "0,0" como la parte superior izquierda actual (aunque parezca que lo están), puede consultar con http: // stackoverflow. com/q/3464876/32453.También puede necesitar establecer un índice z si hay otros divs de posición absoluta alrededor. Además, si hay una opción de "pantalla completa", es posible que no se muestre su "div superior" si no es un elemento secundario de la div "completa filtrada". GL! – rogerdpack
Uso
position: absolute;
top: ...px;
left: ...px;
para colocar el div. Asegúrese de que no tenga una etiqueta principal con posición: relativa;
Puede que necesite usar 'z-index' también. –
Los resultados c ontainer div tiene position: relative lo que significa que todavía está en el flujo de documentos y cambiará el diseño de los elementos a su alrededor. Debe usar position: absolute para lograr un efecto 'flotante'.
También debe comprobar el margen de beneficio que está usando, que tienen fantasmas <li> s sin contenedor <ul>, que probablemente se podría sustituir tanto el div#suggestions y div#autoSuggestionsList con una sola <ul> y obtener el resultado deseado.
dan z-index:-1 a parpadear y dar z-index:100 a DIV ..
Sí, cuanto mayor sea el índice z, mejor. Posicionará su elemento de contenido sobre cualquier otro elemento de la página. Digamos que tiene z-index para algunos elementos en su página. Busque la más alta y luego déle un índice z más alto a su elemento emergente. De esta forma, fluirá incluso sobre los otros elementos con z-index. Si no tiene un índice Z en ningún elemento de su página, debe dar como z-index: 2; o algo superior.
Es posible que desee buscar en Google "lightbox" para ver si ese enfoque le da el efecto deseado. – DOK
La URL en la pregunta da un 404 –