Como se utiliza position en css
Iniciado por
Marta Mendez
, mar 14 2014 15:04
AUTOR PREGUNTA #1
Publicado 14 marzo 2014 - 15:04
Quiero saber como utilizar la propiedad css position para posicionar capas o fondos, no se bien como se utiliza
-
¿Tienes la misma pregunta? Yo también
Esto también te interesa!
PREGUNTAS SIMILARES
#2
Publicado 14 marzo 2014 - 15:14
Position determina una posicion en una capa. Esta posición puede ser estática, absoluta o relativa.
Position static
La posición static es el valor predefinido por defecto de todos los elementos HTML. Los elementos posicionados estáticamente se van colocando uno a continuación de otro, según la estructura HTML.
Position absolute
Las capas que tienen una posición absoluta no forman parte del flujo natural de los otros elementos del documento HTML, sino que su posición está asignada independientemente de la posición de los otros elementos.
Position absolute se fija mediante unas coordenadas, que vienen dadas por los atributos top y left. El punto inicial de estas coordenadas es la esquina superior izquierda de la caja que contiene los elementos.
Position relative
Para elementos con un posicionamiento relativo, según coordenadas que se asignan en top y left.
Position static
La posición static es el valor predefinido por defecto de todos los elementos HTML. Los elementos posicionados estáticamente se van colocando uno a continuación de otro, según la estructura HTML.
Position absolute
Las capas que tienen una posición absoluta no forman parte del flujo natural de los otros elementos del documento HTML, sino que su posición está asignada independientemente de la posición de los otros elementos.
Position absolute se fija mediante unas coordenadas, que vienen dadas por los atributos top y left. El punto inicial de estas coordenadas es la esquina superior izquierda de la caja que contiene los elementos.
Position relative
Para elementos con un posicionamiento relativo, según coordenadas que se asignan en top y left.
<div style="position: absolute; width: 300px; height: 140px; top: 100px; left: 30px; background-color: #ff9; padding: 10px; width: 300px;"> Esto es una capa con posicionamiento estático </div>
