Está en la página 1de 2

CSS Propiedad position h2{position:absolute;left:100px;top:150px;} Con el posicionamiento absoluto, un elemento se puede colocar en cualquier lugar de una pgina.

El rubro ms abajo se coloca 100px desde la izquierda de la pgina y 150px de la parte superior de la pgina.
Value Description

static

Default. Es el valor predeterminado del atributo y el posicionamiento normal de los elementos en la pgina. Quiere decir que los elementos se colocarn segn el flujo normal del HTML, es decir, segn estn escritos en el propio cdigo HTML. Por decirlo de otra manera, static no provoca ningn posicionamiento especial de los elementos y por tanto, los atributos top, left, right y bottom no se tendrn en cuenta. El valor absolute en el atributo position permite posicionar elementos de manera absoluta, esto es de manera definida por valores de los atributos top, left, bottom y right, que indican la distancia con respecto a un punto. Las capas o elementos con posicionamiento absoluto quedan aparte del flujo normal del HTML, quiere decir esto que no se afectan por el lugar donde aparezcan en el cdigo HTML y tampoco afectan ellas a otros elementos que s que formen parte del flujo normal del HTML. Los valores top, left, bottom y right se expresan con unidades CSS y son una distancia con respecto al primer elemento contenedor que tenga un valor de position distinto de static. Si todos los contenedores donde est la capa posicionada con position absolute (todos sus padres hasta llegar a BODY) son static, simplemente se posiciona con respecto al lado superior de la pgina, para el caso de top, el inferior para bottom, del lado izquierdo para left o el derecho, en el caso de utilizar right.

absolute

fixed

Este atributo sirve para posicionar una capa con posicionamiento absoluto, pero su posicin final ser siempre fija, es decir, aunque se desplace el documento con las barras de desplazamiento del navegador, siempre aparecer en la misma posicin. El lugar donde se "anclar" la capa siempre es relativo al cuerpo (el espacio disponible del navegador para la pgina). Si utilizamos top y left, estaremos marcando su posicin con respecto a la esquina superior izquierda y si utilizamos bottom y right su posicin ser relativa a la esquina inferior derecha.

relative

El valor relative en el atributo position indica que la capa s forma parte del flujo normal de elementos de la pgina, por lo que su posicin depender del lugar donde est en el cdigo y el flujo HTML. Adems, las capas con posicionamiento relative, admiten los valores top y left para definir la distancia a la que se colocan con respecto al punto donde est en ese momento el flujo normal del HTML. Como afectan al mencionado flujo del HTML, los elementos colocados despus de las capas relative, tendrn en cuenta sus dimensiones para continuar el flujo y saber dnde colocarse. Sin embargo, no se tendr en cuenta los top y left configurados.

inherit

El valor inherit indica que el valor de position tiene que heredarse del elemento padre. No funciona en Explorer, al menos hasta la versin 8. Tiene en verdad poca utilidad y adems, como no funciona en el navegador ms utilizado en la actualidad, tiene aun menos sentido usarlo.

Estilo z-index Mediante el estilo z-index de CSS podemos ordenar los elementos de nuestra pgina web a nuestro gusto. z-index crea una capa nueva que tiene un nivel o una altura diferente al resto de las capas. Observa el siguiente cdigo:

<div style="position:absolute; top:40px; left:40px; width:300px; height:300px; visibility:visible z-index:1"></div>

Lo primero que observamos es que la capa posee una posicin. Y es que estas capas slo funcionan si se le especfica la posicin. En este caso es absoluta, pero tambin podramos haberla hecha relativa. Tambin vemos que la capa z-index tiene un valor, que en este caso es 1. Las capas son apiladas dependiendo del valor que tengan, siempre de mayor a menor. Por ejemplo, una capa con z-indez:2 se apilara por encima de la capa que vimos anteriormente, que era z-indez:1. Pincha en el siguiente enlace para acceder al ejemplo que hemos hecho nosotros y observa el cdigo fuente para aclarar tus dudas