Flotar un div sobre el contenido de la página


81

Implementé un cuadro emergente que muestra dinámicamente las opciones de búsqueda. Quiero que el cuadro "flote" sobre todo el contenido del sitio. Actualmente, cuando se muestra el cuadro, desplaza todo el contenido debajo y se ve mal.

Creo que ya intenté configurar el índice z del div del cuadro por encima del contenido de la página restante, pero aún así no tuve suerte.


2
Es posible que desee buscar en Google "lightbox" para ver si ese enfoque le da el efecto deseado.
DOK

3
La URL en la pregunta da un 404
Bryan Oakley

Respuestas:


111

Quieres utilizar el posicionamiento absoluto .

Un elemento de posición absoluta se posiciona en relación con el primer elemento padre que tiene una posición distinta a la estática. Si no se encuentra tal elemento, el bloque contenedor es html

Por ejemplo :

.yourDiv{
  position:absolute;
  top: 123px;
}

Para que funcione, el padre debe ser relativo ( position:relative)

En su caso, esto debería funcionar:

.suggestionsBox{position:absolute; top:40px;}
#specific_locations_add{position:relative;}

2
@MrBoJangles actualizó la respuesta para usar su enlace. La respuesta es 4 años, era un momento diferente ^^
marcgg

1
Notas de pareja: debe especificar una coordenada superior o izquierda o esto no parece funcionar. También tenga cuidado si desea que su div esté "en la pantalla" de que a veces las páginas web no siempre muestran "0,0" como la parte superior izquierda actual (incluso si parece que lo están), puede verificar con stackoverflow.com/q/ 3464876/32453 . También es posible que deba 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 su "div superior" no se muestre si no es un elemento secundario del div "de pantalla completa". GL!
rogerdpack

1
Esta respuesta, "Para que funcione, el padre debe ser relativo", la siguiente respuesta es "Asegúrese de que no tenga una etiqueta de padre con la posición: relativa". ¡Alguien está equivocado!
BJury

¿No hay forma de hacer esto con position: sticky;? Tengo una barra de navegación que quiero que permanezca en su lugar cuando la página se desplaza, y cambiarla a absoluta arruinaría eso.
CorruptComputer

BJury lo leíste incorrectamente. El div que estás posicionando no puede ser relativo. El div que está dentro DEBE ser relativo.
John Lord

13

Utilizar

position: absolute;
top: ...px;
left: ...px;

Para posicionar el div. Asegúrese de que no tenga una etiqueta principal con la posición: relativa;


2
Puede que sea necesario utilizarlo z-indextambién.
stommestack


1

Sí, cuanto mayor sea el índice Z, mejor. Colocará su elemento de contenido encima de todos los demás elementos de la página. Supongamos que tiene un índice Z para algunos elementos de su página. Busque el más alto y luego asigne un índice Z más alto a su elemento emergente. De esta manera fluirá incluso sobre los otros elementos con índice z. Si no tiene un índice z en ningún elemento de su página, debe dar como z-index: 2; o algo más alto.


0

El div del contenedor de resultados position: relativesignifica que todavía está en el flujo del documento y cambiará el diseño de los elementos que lo rodean. Necesitas usar position: absolutepara lograr un efecto 'flotante'.

También debe verificar el marcado que está usando, tiene fantasmas <li>sin contenedor <ul>, probablemente podría reemplazar tanto el div#suggestionsy div#autoSuggestionsListcon uno solo <ul>y obtener el resultado deseado.


0

El siguiente código está funcionando,

<style>
    .PanelFloat {
        position: fixed;
        overflow: hidden;
        z-index: 2400;
        opacity: 0.70;
        right: 30px;
        top: 0px !important;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }
</style>

<script>
 //The below script will keep the panel float on normal state
 $(function () {
        $(document).on('scroll', function () {
            //Multiplication value shall be changed based on user window
            $('#MyFloatPanel').css('top', 4 * ($(window).scrollTop() / 5));
        });
    });
 //To make the panel float over a bootstrap model which has z-index: 2300, so i specified custom value as 2400
 $(document).on('click', '.btnSearchView', function () {
      $('#MyFloatPanel').addClass('PanelFloat');
  });

  $(document).on('click', '.btnSearchClose', function () {
      $('#MyFloatPanel').removeClass('PanelFloat');
  });
 </script>

 <div class="col-lg-12 col-md-12">
   <div class="col-lg-8 col-md-8" >
    //My scrollable content is here
   </div>
   //This below panel will float while scrolling the above div content
   <div class="col-lg-4 col-md-4" id="MyFloatPanel">
    <div class="row">
     <div class="panel panel-default">
      <div class="panel-heading">Panel Head </div>
     <div class="panel-body ">//Your panel content</div>
   </div>
  </div>
 </div>
</div>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.