web-dev-qa-db-fra.com

Puis-je combiner position: relative et float: left?

Puis-je appliquer à la fois position: relative et float: left sur un élément? Comme ça:

div {
  float: left;
  position: relative;
  top: 0px;
  left: 0px;
}
csscss3
31
Randy Mayer

Oui.

CSS2.1, 9.4.3 :

"Une fois qu'une boîte a été agencée selon le flux normal ou floated, , Elle peut être décalée par rapport à cette position. C'est ce que l'on appelle le positionnement relatif"

41
Jonatan Littke

Pourrais-je appliquer la position relative et le flottant laissé sur un élément?

Oui. Essaye le.

6
Pekka 웃

Je veux donner une réponse différente au cas où cela pourrait aider quelqu'un. J'ai eu deux div côte à côte que je voulais qu'ils prennent de la place:

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

J'avais l'habitude de faire cela en appliquant <div class="clear"></div> après tous ceux qui flottaient. Cela fonctionnait parce que .clear { clear: both; } résoudrait le problème. Cela ne fonctionne plus pour moi. Au lieu de cela, j'ai suivi ces instructions et ajouté cette classe à mon conteneur:

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

alors j'ai fini avec:

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

Voici un lien vers un exemple de bootply.com: http://www.bootply.com/EupCHRhV4s

1
Termato

Les réponses qui prétendent que vous pouvez combiner float et position sont en réalité incorrectes. Oui, la position de la div flottante va effectivement bouger, mais le texte environnant ne se déroulera pas comme prévu. Le problème est que les attributs de position laissent effectivement une boîte blanche où se trouvait la div que vous êtes en train de flotter, puis la déplacent ailleurs, laissant la boîte derrière. En d'autres termes, vous allez positionner votre div au-dessus du texte, alors que vous souhaitez probablement que le texte défile autour de la div à sa nouvelle position.

Voici un exemple de div ayant un simple float: right

 enter image description here

Voici un exemple du même div, mais avec position: relative; et en haut: 0,75 pouce; ajoutée:

 enter image description here

Notez comment la boîte est maintenant posée sur le texte. Ce n'est probablement pas ce que vous voulez!

0
aholub