CSS authoritative guide-floating and positioning

Positioning

The idea of positioning is very simple where the element box appears relative to the normal position.

Positioning: Static, relative, absolute, fixed, inherited

Static is the default location

Relative is the offset from the default position. The original static positioning position still occupies.

Absolute positioning is relative to the offset of the containing block (not static). Completely out of the document flow, the original location is gone.

Fix offset relative to the viewport window.

Include Block

The root element is the initial containing block, some browsers are HTML elements, and some are body.

Non-root element, position is a relative or default location, and contains blocks that are recent ancestor-level block-level boxes, table cells, inline blocks.

Non-root, position is absolute, contains the block as the nearest non-static ancestor element.

If it is a block level, the bounds of the containing block are the inner boundaries of the containing block.

If it is within a row, the containing block is the boundary of the row box.

If there is no ancestor, the containing block is the initial containing block.

The inclusion block (containing box) is actually the positioning context. It is understood as a reference environment for position positioning.

Offset property

With reference to the environment, on the two-dimensional, the upper and lower left and right offset how much?

The value of this property can be a length, percent, auto, inherit

The value can be negative, or offset in the opposite direction.

The length is well understood, and the percentage is the percentage of the value that contains the block. For example, Top/bottom 10% is 10 of the height of the block, if Left/right is the width.

Found a problem if an element that is positioned as relative contains a block height that is not set, it should be auto. Top/bottom is set to a value of percent. The browser (firefox38) ignores this percentage value.

Reference:

Last Comment Bug 260348 -Relative positioning with percentages inside auto-height containing block does Not work

https://bugzilla.mozilla.org/show_bug.cgi?id=260348

CSS authoritative guide-floating and positioning