Why float position Elements not move when the element scale down

Question

All:

Say right now I have 3 DIVs sit in a same row, each is width: 33%; height:100%; And right now I want to use transform: scale(0.5) to zoom out the first one, and I thought the second one will move left, but I do not know why the second one does not move at all, could anyone help?

Answer 1

A similar question was asked here and this quote from the accepted answer pretty much explains it:

CSS Transform does not affect document flow. The DOM element will occupy its original position and dimensions within the page flow.

Answer by chrisgonzalez

So your DIV doesn't move because despite the scaling, the document still treats the element as being of its original size. To make the change affect flow you'll have to actually change its dimensions with width and height.

Answer 2

Every time you use transform a stacking context will be created. In that case the object will act as a containing block for position: fixed elements that it contains.