CSS中的position

CSS中的position

CSS中的position有static，relative，absolute，fixed，inherit这几个取值。

static

所有的元素默认的position都是static类型的，static类型的值无top，right，button，left值，也就是说在static的布局下，top，right，button，left不起作用。

The box is a normal box, laid out according to the normal flow. The ‘top’, ‘right’, ‘bottom’, and ‘left’ properties do not apply.

relative

relative类型的与static很类似，只不过此时top，right，button，left起作用了。

The box’s position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of ‘position:relative’ on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

absolute

设置为absolute的元素则脱离了normal flow，我们可以将其放在任意位置。与relative类似，其也可以设置top，right，button，left，不过此时，如果父元素为relative，则是相对的是父元素的位置，若无为relative的父元素，则相对于document的位置。

The box’s position (and possibly size) is specified with the ‘top’, ‘right’, ‘bottom’, and ‘left’ properties. These properties specify offsets with respect to the box’s containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

fixed

fixed与absolute类似，故其元素也脱离了normal flow，不过其位置是相对于viewport是固定的，即使我们滚动页面，该元素位置不会随着滚动而移动。

The box’s position is calculated according to the ‘absolute’ model, but in addition, the box is fixed with respect to some reference. As with the ‘absolute’ model, the box’s margins do not collapse with any other margins. In the case of handheld, projection, screen, tty, and tv media types, the box is fixed with respect to the viewport and does not move when scrolled. In the case of the print media type, the box is rendered on every page, and is fixed with respect to the page box, even if the page is seen through a viewport (in the case of a print-preview, for example). For other media types, the presentation is undefined. Authors may wish to specify ‘fixed’ in a media-dependent way. For instance, an author may want a box to remain at the top of the viewport on the screen, but not at the top of each printed page. The two specifications may be separated by using an @media rule, as in:

@media screen {
h1#first { position: fixed }
}
@media print {
h1#first { position: static }
}
UAs must not paginate the content of fixed boxes. Note that UAs may print invisible content in other ways. See “Content outside the page box” in chapter 13.

User agents may treat position as ‘static’ on the root element.

inherit

吴国想要继承父元素的position，我们需要将其值置为inherit。