¿Cómo funcionan los elementos CSS ‘flotante’ y ‘posición’?

Los flotadores y el posicionamiento son dos formas diferentes de determinar dónde se colocarán los elementos en la página. Los flotadores son fáciles de usar pero no muy específicos; El posicionamiento es preciso hasta el píxel , en teoría, pero las reglas son más complicadas y los errores del navegador son más molestos.

El uso de float permite forzar a un elemento a “flotar” lo más a la izquierda o derecha de su contenedor que pueda. Otro contenido en el mismo contenedor acomodará el flotador y fluirá a su alrededor. El CSS se ve así:

 #floatMeLeft { float: left; } #floatMeRight { float: right; } 

Los únicos valores legales son left y right , por lo que no puede usar flotantes para centrar las cosas. Si se flota más de un elemento dentro del mismo contenedor, digamos a la izquierda, cada uno se moverá tan a la izquierda como sea posible antes de que golpee a otro. Si no hay suficiente espacio en la línea para mantenerlos a todos, el primero que no se ajusta se despliega a la siguiente línea y el ajuste comienza nuevamente desde allí.

• ¿Qué tipo de aplicación UIWebView aprueba la aplicación?
• ¿Qué es un litigio automatizado?
• ¿Cuáles son los pros y los contras de software y hardware?
• ¿La aplicación debe ser multilingüe?
• ¿Qué tipo de proyectos de software no web / móviles puedo construir?

Esto es un poco difícil de describir, así que he puesto un par de demos en JSFiddle:

1. Flotadores simples: http://jsfiddle.net/bulat/VfDBn/
2. Múltiples flotadores en un contenedor : http://jsfiddle.net/bulat/neQzu/

Ahora agárrate a tus pantalones porque es hora de posicionarse.

El uso de flotantes solo requiere que establezca una propiedad, pero la posición requiere dos o tres.

• position – Uno de: absolute , relative , static , fixed , inherit
• top / right / bottom / left : algún valor acotado. Elija uno o cualquier par xy de estas propiedades para establecer.

Una regla terminada se parece a esto:

 #positionMe { position: relative; top: 5px; } #positionMeToo { position: absolute; bottom: 1em; left: 40px; } 

La parte superior, derecha, izquierda e inferior son básicamente lo que parecen: cuántas unidades desde esa dirección debe desplazarse el elemento posicionado. La parte confusa es que estas propiedades significan cosas diferentes para diferentes valores de position .

• position: absolute : los desplazamientos son relativos al borde correspondiente del primer ancestro posicionado del elemento que se está diseñando, o a la ventana de contenido si no tiene ninguno. (En este caso, “posicionado” significa un elemento cuyo valor de position no es static ).
• position: relative : los desplazamientos son relativos al lugar donde habría estado el elemento con estilo si no hubiera alterado su posición. Esto es bueno para situaciones en las que desea que su widget se mueva un poco por allí.
• position: fixed desplazamientos son relativos a los bordes de la ventana de contenido. El elemento permanecerá allí incluso si intenta desplazarlo fuera de la vista.
• position: static : el valor predeterminado. Los elementos posicionados estáticamente van a donde el navegador los coloque normalmente.
• position: inherit – El elemento posicionado hereda el valor de su padre. (Pero esto está parcialmente roto en IE <9.)

Y para su placer de posicionamiento:

1. Posicionamiento absoluto: http://jsfiddle.net/bulat/5xuce/
2. Posicionamiento relativo: http://jsfiddle.net/bulat/S2yg6/
3. Posicionamiento fijo: http://jsfiddle.net/bulat/RwFRg/