1
Clase 3 - positioning Jue Feb 07, 2013 6:42 am
cristimar
Mensajes : 111 
Monedas : 357 Curso WEBD: CSS – Clase 3
bienvenidos a una pequeña clase de una propiedad de css el positioning , este nos sirve para posicionar objetos en nuestra pagina moviendolos mediante css
hay varios tipos de posicionamiento y estos nos permiten moverlos con los valores
right
left
top
bottom
hay dos formas de usarlos
la primera es poniendole un valor positivo a las medidas de las propiedades haciendo que se muevan en la direccion contraria
es decir si pongo
este se movera 80 pixeles a la izquierda
la segunda es poniendole un valor negativo de medidas haciendo que se mueva en la direccion que pides.
bienvenidos a una pequeña clase de una propiedad de css el positioning , este nos sirve para posicionar objetos en nuestra pagina moviendolos mediante css
hay varios tipos de posicionamiento y estos nos permiten moverlos con los valores
right
left
top
bottom
hay dos formas de usarlos
la primera es poniendole un valor positivo a las medidas de las propiedades haciendo que se muevan en la direccion contraria
es decir si pongo
- Código:
right:80px;
este se movera 80 pixeles a la izquierda
la segunda es poniendole un valor negativo de medidas haciendo que se mueva en la direccion que pides.
- Código:
right:-80px;
Posicionamiento normal o estático: se trata del posicionamiento que utilizan los navegadores si no se cambias su valor este ignora los valores right left top y bottom.
ejemplo:
http://jsfiddle.net/pL8GU/3/
forma de usarlo:
- Código:
popiedad {
position:static;
}
Posicionamiento relativo:esta mueve la caja de su posicion original pero dejando el espacio que esta ocupaba antes , en otra forma de decirlo esta no altera el posicionamiento de los objetos que habian antes de el cambio.
usa las propiedades right left top bottom
ejemplo:
http://jsfiddle.net/pL8GU/4/
forma de usarlo
- Código:
position:relative;
posicionamiento absoluto : es mas complejo que el relativo , ya que este lleva al limite del contenedor que encierra la caja o elemento que quieres mover y al contrario que esta no deja el espacio que anteriormente ocupaba
con colocarles valor 0 :
la propiedad top lleva el borde superior de nuestra caja hasta el borde superior del contenedor de esta
la propiedad bottom lleva el borde inferior de nuestra caja hasta el borde inferior del contenedor de esta
la propiedad right lleva el borde derecho de nuestra caja hasta el borde derecho del contenedor de esta
la propiedad left lleva el borde izquierdo de nuestra caja hasta el borde izquierdo del contenedor de esta del contenedor de esta
ejemplosi quieres moverlo hacia por ejemplo abajo empezando desde la parte superior del contenedor pondrias
top:200px;
moviendolo hacia abajo 200 pixeles
http://jsfiddle.net/pL8GU/7/
forma de usarlo:
- Código:
position:absolute;
Posicionamiento fijo: usa las mismas propiedades que el posicionamiento absoluto execto que convierte una caja en un elemento inamovible, de forma que su posición en la pantalla siempre es la misma independientemente del resto de elementos e independientemente de si el usuario sube o baja la página en la ventana del navegador.
ejemplo:
http://jsfiddle.net/pL8GU/6/
forma de usarlo
- Código:
position:fixed;
, era momento de revivir esta zona XD
