el comportamiento de la parte superior: automático; me bamboozles

Hola Estoy realmente confundido acerca de algunos conceptos básicos con el posicionamiento absoluto.el comportamiento de la parte superior: automático; me bamboozles

<!DOCTYPE html> 
<html> 
<head>  
<link href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css" rel="stylesheet" type="text/css" /> 

<style>  
#containingBlock { 
    position: relative; 
    background: green; 

} 
#abs { 
    position: absolute; 
    background: blue; 
    top: auto; 
} 
</style> 
</head> 
<body> 

<div id="containingBlock"> 

    <p>foo</p> 

    <div id="abs">bar</div> 

</div> 

</body> 
</html>

Con el marcado configurado como arriba, div # abs no se superpone al párrafo foo.

Sé que podría hacerlo haciendo que la parte superior tenga un valor de 0 en lugar de automático, pero como div # containingBlock no tiene relleno, pensé que auto y 0 harían lo mismo.

Sin embargo, si el párrafo y div # abs se cambian en el orden de origen -para hacer que la barra venga antes de foo -top: auto; funciona exactamente como esperaba

¡Alguna explicación agradecida!

Fuente

2011-03-23 Dave C

1 para "Bamboozles" –

es fácil (J/K!), Automóviles y 0 no son la misma cosa .. bueno me refiero a la mayoría de las veces son

auto es cuando el render agente (el navegador) intentos para decidir lo que quiere decir . en el caso n. ° 1, el agente de renderizado es lo suficientemente inteligente como para saber que hay un elemento anterior, por lo que lo permite

, como lo señaló correctamente si explícitamente dice que vaya a 0, hará lo que se le dice

intercambiar el orden de origen es el mismo, es suficiente para saber que ya no hay nada que le precede de manera automática significará 0 en ese caso

Fuente

2011-03-23 01:05:16 clairesuzy

he leído una y otra vez que el posicionamiento absoluto se toma las cosas fuera de la corriente. Sin embargo ... suena casi como si, cuando tienes 'position: absolute',' auto' actúa como si dijeras 'position: static'. Eso suena bien? referencia –

de sitepoint dice: "si el valor para la parte superior ser' auto' (el valor inicial), el borde del margen superior de la caja se colocará en el borde superior de contenido de su bloque de contención." ¿Esto simplemente está mal? –

sí un poco como estática o un pariente, que sólo está siendo auto .. puntos del sitio ref, no siempre tiene la razón, en las especificaciones Simplemente dice sobre TOP _ "Esta propiedad especifica la distancia del borde del margen superior de una caja con posición absoluta se ve compensado por debajo del borde superior del bloque que contiene la caja. "_ Esto significa que si es 0 no se compensa si es automático, intentará averiguar a qué se refiere y probablemente lo haga teniendo en cuenta la casilla del borde inferior (o es contenido). . siento que es difícil de explicar, pero no sé donde Sitepoint consigue que tu ejemplo y muestra muy claramente lo que debe suceder :) frontera/contenido – clairesuzy

-1

el uso de auto por la parte superior (o izquierda) y después inteligente le dice al navegador para posicionar una elemento de la misma manera que lo haría si el elemento tuviera 'posición: fijo'.

Este jsFiddle demuestra lo que quiero decir: http://jsfiddle.net/kUmKW/

intente cambiar el valor de la izquierda o la parte superior del auto para ver qué pasa.

Fuente

2011-03-23 01:11:06 tilleryj

mal, automático significa que aquí no hay un posicionamiento https://developer.mozilla.org/pl/docs/Web/CSS/position, aunque el ejemplo es bueno – rofrol

Realmente no posicionó estos elementos, acaba de declarar qué tipo de posicionamiento desea usar. En este caso, el valor auto realmente no está haciendo nada, porque el elemento #abs se coloca justo donde normalmente lo haría de todos modos. Si eliminaste el segmento top: auto; directamente, no tendría ningún efecto en el elemento.

"barra" no se superpone "foo" porque no lo ha posicionado para hacerlo. Está contenido dentro del elemento #containingBlock y se coloca debajo del elemento de bloque <p> porque "foo" ocupa una cantidad discreta de espacio. ¿Quieres anular eso? Establezca el top u otros valores de posición correspondientes. Para reiterar lo que otros han dicho, top:auto simplemente coloca la parte superior de ese elemento tan arriba como lo permita la habitación (que es lo que el elemento habría hecho normalmente).

Para referencia futura, el valor auto se utiliza para cuando una propiedad CSS principal anula el estilo del elemento secundario. Por ejemplo, digamos que tiene un código más complicado que tenía una regla para aplicar un margen a cada div dentro de #containingBlock. Si desea cambiar eso a la normalidad, debe incluir margin:auto; en su containsBlock CSS.

Fuente

2011-04-05 07:23:18 MMMdata

Cuando establece la posición absoluta (relativa, etc.) y no especifica una nueva posición para el elemento, se colocará donde normalmente se mantendría si no hubiera una posición: absoluta.

Si se establece en automático es como si no especifica una posición superior y por lo tanto se guarde en el párrafo donde normalmente se quedaría si no se aplicó ningún posicionamiento especial.

Fuente

2011-04-23 14:14:16 Francisc

el comportamiento de la parte superior: automático; me bamboozles

Respuesta

Cuestiones relacionadas