With the help of float: left several divs in a row in a row, and before each of them we will add a button and assign it position: absolute : https://jsfiddle.net/v4xjy9d3/2/

 div { width: 10em; height: 10em; float: left; background: linear-gradient(to right, silver, blue); } button { position: absolute; } 
 <button>Button</button> <div></div> <button>Button</button> <div></div> <button>Button</button> <div></div>

In chrome, the blocks stand in a row, and the button is superimposed on each of the blocks. But Firefox first placed all the floats, and then, similarly to the text, placed all the buttons after them, one on top of the other. Which browser is right in this case?

screenshots

PS: How to fix it, I myself know - to wrap each pair in a block with which to set a float. It is interesting to find out which behavior is correct.

  • I tried Opera 12 (Presto) for the sake of interest - it behaves like chrome - andreymal

1 answer 1

The buttons are positioned absolutely, but left , right and width are not specified for them. When all three of these parameters turn out to be auto (their default value), the specification instructs them to be calculated so that the absolutely positioned element is in the same place where it was at position: static and float: none .

This position of the element is called " static position ":

"the static position"

To imagine a "static position" for each button, it is convenient to consider them in turn:

  1. The first button, if you write it position: static; float: none position: static; float: none , will be in the upper left corner of the container.
  2. The second is to the right of the first floating block.
  3. The third is to the right of the first two floating blocks.

It turns out that chrome and the explorer show just this “static position” for each of the buttons, and the firefox is wrong.

  • But the static position for inline-elements is calculated after all the floats, which means that either the answer is incomplete, or the rights are exactly the same FF? And there is also an interesting point, if you add display: block to the button. Chrome will put all the buttons in the beginning, but for some reason the fox is not always there - it already looks like a fox cant with a check of the need to recalculate the position when changing. - Qwertiy ♦ 5:34 pm
  • It seems to me that in order to get a static position it is necessary to consider only the preceding floating blocks. - Gleb Kemarsky
  • Well, I think so too , but is it spelled out somewhere?) - Qwertiy ♦
  • I think the order of calculation is determined by the fact that the button is still absolutely positioned, and not inline. But in order to understand its "static position", we imagine that it is in a normal stream. From this it seems to me that the button is considered as if there is nothing after it, and the subsequent floating blocks do not interfere. But it seems that the guys from firefox decided differently. - Gleb Kemarsky
  • So that is why I asked the question :) - Qwertiy ♦