Aspectos relacionados con el posicionamiento

El tipo de posicionamiento que se decida aplicar a un elemento dependerá del diseño del contenido y de la finalidad del documento. El posicionamiento relativo depende del flujo predeterminado del documento y cambia el flujo del contenido cuando el usuario cambia el tamaño del explorador. El posicionamiento fijo, al estar directamente relacionado con la ventana del explorador, también responde a un cambio del flujo cuando se cambia el tamaño de la ventana del explorador. Sin embargo, el posicionamiento absoluto coloca con precisión las imágenes y el texto sin considerar si el usuario cambia o no el tamaño del explorador.

Anidar elementos con distinto tipo de posicionamiento

El siguiente ejemplo de código demuestra el concepto de anidar un elemento con posicionamiento absoluto dentro de un elemento con posicionamiento relativo. El efecto que se desea conseguir es centrar el texto en un rectángulo. En el pasado, podría haber usado tablas y atributos para centrar el contenido dentro de una celda de una tabla. Sin embargo, este diseño limita a usar una tabla estática. Mediante los atributos de posición, se puede crear un diseño más grande para el contenido y después agregarle scripting que, por ejemplo, permita animar cada uno de estos elementos para que parezca que caen y se colocan desde algún lugar fuera del documento cuando el usuario carga la página.

<html>
<head><title>Center the div</title>
<script language="Jscript">
function doPosition() {
two.style.top = document.all.one.offsetHeight/2 - 
two.offsetHeight/2;
two.style.left = document.all.one.offsetWidth/2 - 
two.offsetWidth/2;
}
</script>
</head><body onload="doPosition()">
<p>Some text in the beginning.</p>
<div id="one" 
    style="position: relative; top: 10px; 
    height: 200px; width: 200px; 
    background-color: green;">Some text in the outer div
    <div id="two" style="position: absolute;
       left: 50px; width: 100px; border :red 2px solid;
       color: red;">text in the inner div - color should be red
    </div>
<div>
</body>
</html>

En este ejemplo, el elemento DIV exterior fluye con el contenido de la página porque está posicionado 10 píxeles justo después del primer párrafo. El elemento DIV interior tiene una posición absoluta inicial, pero esta posición se modifica con la función del script doPosition cuando se carga el documento. Las propiedades offsetWidth y offsetHeight sirven para calcular la nueva posición absoluta de un elemento.

Vea también

Adiciones de comunidad

AGREGAR
Mostrar: