Can I combine position: relative and float: left?

Question

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

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


        

Answer 1

The answers that claim that you can combine float and position are actually incorrect. Yes, the position of the floating div will indeed move, but the surrounding text will not flow as you expect. The problem is that the position attributes effectively leave a white box where the div that you're floating used to be, then moves the div elsewhere, leaving the box behind. Put another way, you'll be positioning your div on top of the text, when what you probably want is for the text to flow around the div in its new position.

Here's an example of a div that has a simple float:right

Here's an example of the same div, but with position:relative; and top:.75in; added:

Note how the box is now sitting on top of the text. That's probably not what you want!