Tipos de posiciones CSS

hackjose · #1 (**permalink**) 07/08/2013, 16:42

Que tal amigos

Solo para confirmar, para asegurar que estoy en lo cierto

Posicion static
Es el valor por default, top,bottom,left,right no tienen efecto

Posicion relativa
Top,bottom,left,right si tienen efecto y es con respecto a la posicion normal

Posicion absolute
Top,bottom,left,right si tienen efecto y es con respecto al containing block(contenedor posicionado) si no ubiera con respecto al initial containing block

Posicion fixed
Top,bottom,left,right si tienen efecto y siempre es con respecto al viewport, incluso si el elemento es un child de un elemento posicionado, su posicion siempre es con respecto al viewport

Saludos

pzin · #2 (**permalink**) 07/08/2013, 19:40

Básicamente si. La posición absoluta también se ajustaría al viewport si no hubiese ningún elemento de contención. Eso y que elementos con posición absoluta y fija salen del flujo natural del documento.

Rafael · #3 (**permalink**) 08/08/2013, 08:36

Por ahí hay otros, como centered y page, pero no están muy implementados.
http://dev.w3.org/csswg/css-position/#dis-pos-flo

hackjose · #4 (**permalink**) 09/08/2013, 12:46

Muchas gracias amigos

nanotime · #5 (**permalink**) 12/08/2013, 11:50

La posición relativa no era de hecho, relativa a su contenedor directo y la absoluta ya al propio body? Siempre he tenido esa duda.

pzin · #6 (**permalink**) 12/08/2013, 15:35

Cita:

Iniciado por nanotime

La posición relativa no era de hecho, relativa a su contenedor directo y la absoluta ya al propio body? Siempre he tenido esa duda.

La relativa es relativa al lugar donde aparece en el documento. Y la absoluta es relativa al primer elemento ancestral que tenga una posición diferente a estática, y en caso de que no exista, al elemento raíz, que es el viewport.

Aquí tienes un screencast —en inglés— sobre posicionamiento: http://css-tricks.com/video-screenca...sition-values/

Rafael · #7 (**permalink**) 12/08/2013, 16:59

Cita:

Iniciado por pzin

La relativa es relativa al lugar donde aparece en el documento.[/url]

Aclaro un poquito. Relativa es donde aparece ese mismo objeto que tiene la propiedad.

Poner la propiedad relativa a un div no le hace absolutamente nada, excepto cuando se comienza por ejemplo a ponerle un top. En ese caso el top comienza a surtir efecto. Una explicación medio babas de mi parte.