0

Can anyone explain the difference of using position:relative, position:absolute, and float in terms of its impact on the normal document flow and its children items?

e.g. When I have three items A,B,C where A is the parent item containing B and C. If I make A position:relative, B position:absolute, C position:absolute, and float both B and C to its left. I find B and C will overlap each other. However I want them to be placed in a serial order contained in A. If I simply dismiss C's position:absolute, they are placed in the right order. So can anyone summarize the impact of these three out of this simple case, and furthermore, if B and C both have children elements, what impact will they have? (like will them be taken out of normal document flow as well?)

4

1 回答 1

0

Position:absolute and float do not coincide. If you position an element absolutely it is then no longer "floating". i.e. absolutely positioned items (or fixed items) are taken out of the flow of the document.

It is generally better to position things statically or relatively unless necessary. Absolute positioning has its uses, but is not generally needed.

Relative positioning is useful when you need to position a child element relative to the parent. So if A is positioned relatively, then positioning B absolutely will mean it is placed based on A's position.

So:

A {
    position:relative;
}

B {
    position:absolute;
    top:30px;
    left:20px;
}

Will place B 30px from the top and 20px from the left of A's upper left corner.

Anything then positioned within B, will be based on B's position. If you have B1 inside B, it will be placed relative to B's position, either floated left or right, or positioned absolutely within B (unless it is position:fixed, which is always relative to the viewport).

Is that the sort of explanation you were after?

于 2013-08-23T09:36:37.293 回答