Positioning in CSS: Layout Enhancements for the Web by Eric A. Meyer-优快云博客

POSITION
在这里插入图片描述

The values of position have the following meanings:

static
The element’s box is generated as normal. Block-level elements generate a rectangular box that is part of the document’s flow, and inline-level boxes cause the creation of one or more line boxes that are flowed within their parent element.
relative
The element’s box is offset by some distance. The element retains the shape it would have had were it not positioned, and the space that the element would ordinarily have occupied is preserved.
absolute
The element’s box is completely removed from the flow of the document and positioned with respect to its containing block, which may be another element in the document or the initial containing block. Whatever space the element might have occupied in the normal document flow is closed up, as though the element did not exist. The positioned element generates a block-level box, regardless of the type of box it would have generated if it were in the normal flow.
fixed
The element’s box behaves as though it was set to absolute, but its containing block is the viewport itself.
sticky
The element is left in the normal flow until the conditions that trigger its stickiness come to pass, at which point it is removed from the normal flow but its original space in the normal flow is preserved. It will then act as if absolutely positioned with respect to its containing block. Once the conditions to enforce stickiness are no longer met, the element is returned to the normal flow in its original space.

In general terms, a containing block is the box that contains another element. As an example, in the normal-flow case, the root element (html in HTML) is the containing block for the body element, which is in turn the containing block for all its children, and so on. When it comes to positioning, the containing block depends entirely on the type of positioning.

For a non-root element whose position value is relative or static, its containing block is formed by the content edge of the nearest block-level, table-cell, or inline-block ancestor box.
For a non-root element that has a position value of absolute, its containing block is set to the nearest ancestor (of any kind) that has a position value other than static. This happens as follows:
- If the ancestor is block-level, the containing block is set to be that element’s padding edge; in other words, the area that would be bounded by a border.
- If the ancestor is inline-level, the containing block is set to the content edge of the ancestor. In left-to-right languages, the top and left of the containing block are the top and left content edges of the first box in the ancestor, and the bottom and right edges are the bottom and right content edges of the last box. In right-to-left languages, the right edge of the containing block corresponds to the right content edge of the first box, and the left is taken from the last box. The top and bottom are the same.
- If there are no ancestors, then the element’s containing block is defined to be the initial containing block.

Another way to look at it is that positive values cause inward offsets, moving the edges toward the center of the containing block, and negative values cause outward offsets.

If the placement of the four sides of the element is described using top, right, bottom, and left, then the height and width of the element are implicitly determined by the offsets.

If an element is set to have visibility: visible, then it is, of course, visible. If an element is set to visibility: hidden, it is made “invisible” (to use the wording in the specification). In its invisible state, the element still affects the document’s layout as though it were visible. In other words, the element is still there—you just can’t see it, pretty much as if you’d declared opacity: 0.

According to the specification, collapse has the same meaning as hidden if it is used on nontable elements.

When an element is positioned absolutely, it is completely removed from the document flow. It is then positioned with respect to its containing block, and its margin edges are placed using the offset properties (top, left, etc.). The positioned element does not flow around the content of other elements, nor does their content flow around the positioned element. This implies that an absolutely positioned element may overlap other elements or be overlapped by them.

The containing block for an absolutely positioned element is the nearest ancestor element that has a position value other than static. It is common for an author to pick an element that will serve as the containing block for the absolutely positioned element and give it a position of relative with no offsets, like so:

.contain {position: relative;}

An important point to highlight is that when an element is absolutely positioned, it establishes a containing block for its descendant elements. For example, we can absolutely position an element and then absolutely position one of its children.

Z-INDEX
在这里插入图片描述

Any integer can be used as a value for z-index, including negative numbers. Assigning an element a negative z-index will move it further away from the reader; that is, it will be moved lower in the stack.

Fixed positioning is just like absolute positioning, except the containing block of a fixed element is the viewport.