En mi largo viaje para actualizar mi CSS habilidades desde el desuso de polvo que se han convertido en, he estado jugando con ciertas propiedades CSS —particularmente z-index —estoy notando algo extraño o tal vez hay una cierta condición.

Ejemplo:
http://jsfiddle.net/mEpgR/

El elemento div1 principal es continuación, he hecho div1 la posición de la propiedad establecida en absoluto, sin embargo, cuando yo cambio, se mueve en relación con su progenitor. Yo estaba bajo la impresión de que los elementos establecidos en el posicionamiento absoluto se outsider flujo regular y se mueven sólo en relación a puerto de explorador como su padre.

Lo que me estoy perdiendo?

Si el violín enlace no funciona, código:

CSS:

.cont {
position:relative; 
height:200px;
top:200px; 
left:100px; 
background: green; width: 200px; 
}

.div1 {
background:red; 
position:absolute; 
top:50px;
}

HTML:

<div class="cont">
<div class="div1">DIV1</div>
</div>
Este es el comportamiento correcto. position:absolute posición de un elemento en relación a la más cercana posicionado antepasado. A la posición relativa del documento, ya sea quitar position:relative de los padres, o mover el elemento de la matriz.
Leer esto developer.mozilla.org/en-US/docs/CSS/position
Eso es por la rápida respuesta; css comportamiento observado.

OriginalEl autor brooklynsweb | 2013-01-17

1 Comentario

  1. 38

    Un elemento con posición absoluta se sitúa en relación con el primer elemento primario que tiene una postura distinta a la estática. Ya lo tienes dentro de un padre con relative va a ser absolutamente sitúa en relación a esta madre.

    Que usted podría estar buscando fixed posición, la cual es relativa a la ventana del navegador.

    aquí: css-tricks.com/absolute-positioning-inside-relative-positioning Hay una explicación gráfica de eso.

    OriginalEl autor Mike Brant

Dejar respuesta

Please enter your comment!
Please enter your name here