Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I combine position: relative and float: left?

Tags:

css

Can I apply both position: relative and float: left on one element? Like this:

div {   float: left;   position: relative;   top: 0px;   left: 0px; } 
like image 860
Randy Mayer Avatar asked Apr 14 '10 06:04

Randy Mayer


People also ask

Does float work with position?

How float and position work together? They don't. An absolutely positioned element cannot float. A floating element cannot be absolutely positioned.

Can you use float and position CSS?

This is the key difference between the float property and the absolute position property in CSS. While floated elements are still a part of the flow of the page, elements using absolute positioning are not. That means floated elements will affect the position of other elements and vice versa.

Does float work with position absolute?

Generally speaking, float is a relative positioning statement, since it specifies the position of the element relative to its parent container (floating to the right or left). This means it's incompatible with the position:absolute property, because position:absolute is an absolute positioning statement.

How does absolute and relative positioning work together?

position: relative places an element relative to its current position without changing the layout around it, whereas position: absolute places an element relative to its parent's position and changing the layout around it.


1 Answers

Yes.

CSS2.1, 9.4.3:

"Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning"

like image 171
Jonatan Littke Avatar answered Sep 20 '22 00:09

Jonatan Littke