¿Puedo combinar la posición: relativa y flotar: izquierda?

Question

¿Puedo aplicar ambos position: relative y float: left en un elemento? De esta manera:

div { 
    float: left; 
    position: relative; 
    top: 0px; 
    left: 0px; 
} 

Answer 1

Sí.

CSS2.1, 9.4.3:

"Una vez que una caja se ha establecido de acuerdo con el flujo normal o flotaron, que se puede desplazar con respecto a esta posición Esto se llama posicionamiento relativo"

Answer 2

¿Podría aplicarse posición relativa y flotar a la izquierda en un elemento?

Sí. Pruébalo.

Answer 3

Quiero proporcionar una respuesta diferente en caso de que pueda ayudar a alguien. Tenía dos de lado a lado del div que yo quería que ellos ocupan espacio:

<div class="col-md-12"> 
    <div class="col-md-6">stuff</div> 
    <div class="col-md-6">other stuff</div> 
</div> 

que solía hacer esto mediante la aplicación <div class="clear"></div> después de todos mis seres flotantes. Esto solía funcionar porque .clear { clear: both; } resolvería el problema. Esto ya no funciona para mí. En su lugar, I followed these instructions y ha añadido esta clase para mi contenedor:

.noFloat { 
    width: 100%; 
    overflow: auto; //If you get a scroll bar, try overflow: hidden; 
    float: none; 
} 

así que terminé con:

<div class="col-md-12 noFloat">...</div> 

Aquí hay un enlace a un ejemplo bootply.com: http://www.bootply.com/EupCHRhV4s

Answer 4

Sí , Puedes usar ambos.

Utilizará float:left para posicionar el elemento en el lado izquierdo y permitir que el siguiente elemento se coloque en el lado derecho de este.

position:relative se afectará a sí mismo y a sus hijos, a tomar su propia posición. cuando use left:npx;top:npx moverá este elemento hacia la izquierda, derecha, arriba y abajo.

puede marcar esta demostración: jsfiddle link

Answer 5

Las respuestas que afirman que se puede combinar flotador y la posición es realmente incorrecto. Sí, la posición del div flotante se moverá, pero el texto circundante no fluirá como esperabas. El problema es que los atributos de posición dejan efectivamente un cuadro blanco donde solía estar el div que estás flotando, luego mueve el div a otro lugar, dejando el cuadro atrás. Dicho de otra manera, colocarás tu div encima del texto, cuando lo que probablemente quieras es que el texto fluya alrededor del div en su nueva posición.

He aquí un ejemplo de un div que tiene un flotador simple: la derecha

He aquí un ejemplo de la misma div, pero con position: relative; y arriba:75 pulgadas; añadido:

Nota cómo el cuadro ahora está sentado en la parte superior del texto. ¡Probablemente eso no es lo que quieres!