2011-09-06 41 views
27

Tengo dos elementos div en una página. ¿Cómo puedo hacer que un div flote sobre otro como emergente?Hacer que un div flote sobre otro

+1

Mmmm ... Creo que se desea utilizar un [luz] (http://leandrovieira.com/projects/jquery/lightbox /). – Cygnusx1

Respuesta

27

Utilice position:absolute; y configure el "emergente" para colocarlo dentro de los límites del otro. El div "popup" también debería ser más pequeño.

Utilice z-index para apilar el "popup" uno encima del otro (le dará un valor más alto para z-index).

Si desea hacer que parezca que el div interno está realmente flotando sobre el otro, cree una sombra con algo como border-right:2px solid black y border-bottom:2px solid black.

Si desea que realmente aparezca/aparezca/desaparezca, necesitará usar algún script.

+0

¿Cómo agrego un "desplazamiento" después de especificar su posición como absoluta? Es imposible porque trata las coordenadas nuevas como coordenadas absolutas, por lo que se vuelven inútiles. Pero claramente debería haber sido posible especificar un desplazamiento porque incluso cuando es "absoluto" no se muestra en (0, 0) – pete

+0

pude resolver mi problema usando lo siguiente: var l = blah.offset(). izquierda; blah.offset ({left: l + 10}); – pete

3

Entonces uso de la propiedad-índice z de css como esto:

div1 { 
    z-index:1000; 
} 

div2 { 
z-index:1001; 
} 

más alta elemento z-índice será de visualización en la parte superior.

7

Creo que establecer position en fixed hará que permanezca visible incluso si el usuario se desplaza. Puede establecer la posición usando los atributos "arriba", "izquierda" y "derecha". El uso de CSS para un logotipo "beta", que básicamente hace lo que usted está pidiendo es la siguiente:

.fixed{ 
    position:fixed; 
    top:0px; 
    right:0px; 
    width:100px; 
} 
Cuestiones relacionadas