Home/ Questions/Q 6983471
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T18:25:23+00:00

I was working on a jsfiddle in an attempt to provide an answer to

  • 0

I was working on a jsfiddle in an attempt to provide an answer to this question, but ran into some unexpected behaviour.

  • I have a list of floated boxes (float:left), flowing over multiple lines.
  • If I add position:absolute to a box on the first line, it stays in its position (as expected), but only in Chrome (not FF).
  • If I add position:absolute to a box on second/third/… line, the box is positioned outside the containing div. If I add top:0 and left:0 to this box, it is positioned in the top left corner of the containing div. This happens in all browsers.

As I have no idea how to explain/fix this behaviour, I was wondering if anyone else had an idea what’s going on?

http://jsfiddle.net/hdX4w/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Based off this experiment, the elements are being positioned to the top of the wrapper as expected, but they are moving “after” the floated elements, which are all positioning to the left as they should. In other words, the absolute is making them become “last” in the list because of the float left.

    It seems to do the opposite with float: right as seen here.

    Somehow, the float positioning (in the left scenario) is making the absolute element that is “out of flow” be pushed after the floats and this is pushing the elements “outside” your box when the width is 100px. Note how with less elements the absolute just falls in behind the floats, as seen here.

    • 0