8
Me gustaría crear un elemento div que está "flotando", no en el sentido de la float property, sino literalmente "flotar":flotante elemento div
A
Respuesta
8
position: absolute con una suficiente z-index alto:
#element {
position: absolute;
top: 50px;
left: 200px;
z-index: 10;
}
0
hay que hacerlo usando posicionamiento e índice Z;
1
Sí, necesita el CSS a ser algo como esto
.floating-div {
position: absolute;
left: 40px;
top: 40px;
z-index: 100000;
}
4
Ésta es una continuación de la respuesta de Tatu, que va a funcionar, pero usa índices z de una manera torpe pero muy común.
El índice Z determina el orden de apilamiento de los elementos posicionados, en relación con otros elementos posicionados. El orden de apilamiento también es relativo al orden de apilamiento de los elementos principales. Por lo tanto:
Cuando se tienen dos elementos relacionados en una página:
<body>
<div style="position:absolute;z-index:2"></div><!-- Position 2 (top) -->
<div style="position:absolute;z-index:1"></div><!-- Position 1 (bottom) -->
</body>
Ambos están apilados de acuerdo con su padre - el body, que se encuentra en su defecto 'fondo' de la pila.
Ahora, cuando estos elementos tienen hijos con índices de z, su posición en la pila se determina en relación a sus padres posición:
<body>
<div style="position:absolute;z-index:2"><!-- Position 2 (top) -->
<div style="position:absolute;z-index:2"></div><!-- Position 2.2 -->
<div style="position:absolute;z-index:1"></div><!-- Position 2.1 -->
</div>
<div style="position:absolute;z-index:1"><!-- Position 1 (bottom) -->
<div style="position:absolute;z-index:2"></div><!-- Position 1.2 -->
<div style="position:absolute;z-index:1"></div><!-- Position 1.1 -->
</div>
</body>
me resulta útil pensar en los niños, ya que tiene un " point 'z-index - entonces el hijo de un elemento con z-index:1 tiene un índice z de 1.x. De esta manera, puede ver que, incluso si le doy a este div un índice z de 100000, nunca aparecerá encima de un elemento con el índice z primario de 2. 2.x siempre aparece en la parte superior de 1. x
esto es útil cuando estás haciendo 'flotante' cosas como superposiciones, notas post-it, etc. una configuración de este tipo es un buen comienzo:
<body>
<div id="contentContainer" style="position:relative;z-index:1">
All your 'page level content goes here. You can use all the z-indexes you like.
</div>
<div id="overlayContainer" style="position:relative;z-index:2">
Anything to float 'on top of the page' goes here. Nothing inside 'contentContainer' can ever appear on top of it.
</div>
</body>
Cualquier cosa que usted quiere flotar en top va a 'overlayContainer' - los índices z base mantienen separadas las dos 'capas', y puede evitar el uso de índices z altos confusos como 999999 o 100000.
Cuestiones relacionadas
- 1. Posicionamiento div flotante
- 2. Div lado a lado sin flotante
- 3. CSS - elemento flotante de ancho automático (flotante expandible)
- 4. Rotar un elemento div
- 5. Flotante de un elemento en línea a la derecha de un div
- 6. ¿Cómo establecer el flotante para cada elemento dentro de un div a la vez sin especificar el flotante para cada elemento dentro?
- 7. CSS: centre verticalmente una imagen dentro de un div flotante
- 8. jQuery - haciendo que un elemento flotante se adhiera a otro elemento
- 9. Cómo desenfocar el elemento div?
- 10. ¿Cómo centrar horizontalmente un elemento flotante de ancho variable?
- 11. CSS3: Flotante primera div entre el segundo y tercer
- 12. Cómo centrar horizontalmente div dentro del elemento primario div
- 13. obtener div anidado en elemento div utilizando Nokogiri
- 14. interiores flotante a la izquierda div de no ampliar el contenedor div verticalmente
- 15. Creando un elemento div dentro de un elemento div en javascript
- 16. ¿Cómo mostrar un elemento div en blanco?
- 17. conseguir ancho de un elemento div
- 18. Cambiar el tamaño del elemento div
- 19. Inserte un elemento div como primario
- 20. Obteniendo el div primario del elemento
- 21. Renderizar Three.js en un elemento div
- 22. Efecto de desenfoque en un elemento div
- 23. Flotante crea divisiones superpuestas
- 24. CSS flotante con superposición
- 25. Mejor solución para cambiar el color de los niños en el elemento flotante principal
- 26. Mezcla flotante y posicionamiento fijo
- 27. Mover un elemento DIV a la parte inferior del elemento principal (como último elemento secundario)
- 28. Ventana flotante modal Twitter Bootstrap
- 29. configurando el valor flotante de Javascript
- 30. Cuerpo flotante transparente
jeje, Hivemind! –
Si usa índices z realmente altos, probablemente no los esté usando correctamente. Usualmente la gente usa esto como una forma de decir 'realmente, realmente, poner esto en la cima', pero entonces, ¿qué pasa si otro elemento tiene 100001? Vea mi 'respuesta' para ejemplos de código sobre una mejor manera de administrar índices z. – Beejamin
Estoy completamente de acuerdo, estaba escribiendo "grande" para ser desagradablemente claro en cuanto a la importancia de que el número sea más alto. –