CSS 定位

相关词汇：

英文	中文
position	位置
static	静态的
relative	相对的，比较的
absolute	绝对的，不受任何限制的
fixed	固定的，不变的
sticky	粘性的

 

css属性position：用于指定选中 elements 的 Positioning Scheme「定位方案」

指定非static的值

• • 使元素成为可以指定安放位置的盒子
  • 为后代（内部全部盒子）创建绝对定位容器 ?"作用见下文"
    

 可选属性值：static | relative | absolute | sticky | fixed

//指定静态的方案，不可定位（默认方案）
{
     position:static;
}
//指定相对的方案，可定位（相对 elements自身指定 static「静态的方案」的位置 定位）
{
　　position:relative;
}
//指定绝对的方案，可定位（相对 最近的绝对定位容器 定位）
{
　　position:absolute;
}
//指定粘性的方案，可定位（初始状态等同指定relative「相对的方案」，当滚动到相对viewpoint「视口」的指定位置即达到阈值时，保持位置不变，除非滚动退回至阈值前） 

{
 　　position:sticky; 
} 
//指定固定的方案，可定位（相对 viewport「视口」定位） 
{
 　　position:fixed; 
}

 

更多：

属性值	区别
static	正常文本流布局	top，right，bottom，left，z-index 无效
relative	静态的盒子，视觉位移	table-*-group, table-row, table-column, table-cell, table-caption会使relative无效
absolute	脱离文档流	不会外边距合并
sticky	静态的盒子，视觉位移
fixed	脱离文档流	当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先

　

下面是w3c的相关Draft（草案）链接

Choosing A Positioning Scheme: position property

✔MDN

Name:	position
Value:	static | relative | absolute | sticky | fixed
Initial:	static
Applies to:	all elements except table-column-group and table-column
Inherited:	no
Percentages:	N/A
Computed value:	specified keyword
Canonical order:	per grammar
Animatable:	no
Animation type:	discrete

The position property determines which of the positioning schemes is used to calculate the position of a box. Values other than static make the box a positioned box, and cause it to establish an absolute positioning containing block for its descendants. Values have the following meanings:

static

The box is not a positioned box, and is laid out according to the rules of its parent formatting context. The inset properties do not apply.

relative

The box is laid out as for static, then offset from the resulting position. This offsetting is a purely visual effect, and does not affect the size or position of any other box, except insofar as it increases the scrollable overflow area of its ancestors. This positioning scheme is called relative positioning.

sticky

Identical to relative, except that its offsets are automatically adjusted in reference to the nearest ancestor scroll container’s scrollport (as modified by the inset properties) in whichever axes the inset properties are not both auto, to try to keep the box in view within its containing block as the user scrolls. This positioning scheme is called sticky positioning.

absolute

The box is taken out of flow such that it has no impact on the size or position of its siblings and ancestors, and does not participate in its parent’s formatting context.

Instead, the box is positioned and sized solely in reference to its absolute positioning containing block, as modified by the box’s inset properties, see § 4 Absolute Positioning Layout Model. It can overlap in-flow content or other absolutely positioned elements, and is included in the scrollable overflow area of the box that generates is containing block. This positioning scheme is called absolute positioning.

fixed

Same as absolute, except the box is positioned and sized relative to a fixed positioning containing block (usually the viewport in continuous media, or the page area in paged media). The box’s position is fixed with respect to this reference rectangle: when attached to the viewport it does not move when the document is scrolled, and when attached to the page area is replicated on every page when the document is paginated. This positioning scheme is called fixed positioning and is considered a subset of absolute positioning.

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 }
}

A position value of absolute or fixed blockifies the box, causes float to compute to none, and forces the box to establish an independent formatting context.