Serkronyx
3/7/2016 - 10:45 PM

Posicionamiento

Posicionamiento

Posicionamiento Absoluto

Normalmente se utiliza cuando quieres posicionar un elemento de manera totalmente independiente. Se puede indicar de manera explícita la posición exacta donde se colocara el elemento.

Para esto ulizamos 3 simples propiedades:

Propiedadposition: Especifica el tipo de posicionamiento a utilizar.

Propiedadtop: Determina la distancia entre la parte superior de la página.

Propiedadleft: Determina la distancia entre la parte izquierda de la página.

HTML
<div id="imagen">
    <img src="tigre.jpg" alt="NO ME SALIO">
</div>
___________________________________________________________________
CSS
#imagen{
    position: absolute;
        top: 100px;
        left: 280px;
}

Posicionamiento Relativo

La diferencia entre posicionamiento absoluto y relativo consiste en cómo se calcula la posición.

La posición se calcula desde la posición original en el documento.Esto significa que el elemento se mueve hacia arriba, abajo, izquierda, derecha donde estaba colocada originalmente.De este modo, el elemento sigue teniendo efecto en los elementos que lo rodean.

Se utilizan 3 propiedades

Propiedadposition: Especifica el tipo de posicionamiento a utilizar. En este caso relative

Propiedadtop: Determina la distancia entre la parte superior del elemento en el que se encuentra.

Propiedadleft: Determina la distancia entre la parte izquierda del elemento donde se encuentra posicionado.

HTML
<div id="imagen">
    <img src="tigre.jpg" alt="NO ME SALIO">
</div>
___________________________________________________________________
CSS
#imagen{
    position: relative;
        top: 100px;
        left: 280px;
}