网页布局定位：position属性解析与代码实例

CSS position属性简介

position属性用于指定一个元素在文档中的定位方式。文档流normal flow 就是文档正常的流动方向； 从左到右（inline元素例如span元素，直到这一行排满了，才会换行），不能用wid

position属性值

position属性有以下几个值：

• static：默认值。元素按照正常文档流进行定位。
• relative：元素相对于其正常位置进行定位。
• absolute：元素相对于其最近的已定位祖先元素进行定位。如果元素没有已定位祖先元素，则相对于文档 body 进行定位。
• fixed：元素相对于视口进行定位。
• sticky：元素在文档流中按照normal flow进行定位，当滚动到指定位置时，元素变为fixed定位。

position属性用法实例

static

<div style="position: static;">元素的默认定位</div>

relative

<div style="position: relative; left: 100px;">元素相对于其正常位置左移100px</div>

absolute

<div style="position: absolute; top: 100px; left: 100px;">元素相对于其最近的已定位祖先元素进行定位</div>

fixed

<div style="position: fixed; top: 100px; left: 100px;">元素相对于视口进行定位</div>

sticky

<div style="position: sticky; top: 100px;">元素在文档流中按照normal flow进行定位，当滚动到指定位置时，元素变为fixed定位</div>

总结

position属性用于指定一个元素在文档中的定位方式。position属性有以下几个值：static、relative、absolute、fixed、sticky。

• static：默认值。元素按照正常文档流进行定位。
• relative：元素相对于其正常位置进行定位。
• absolute：元素相对于其最近的已定位祖先元素进行定位。如果元素没有已定位祖先元素，则相对于文档 body 进行定位。
• fixed：元素相对于视口进行定位。
• sticky：元素在文档流中按照normal flow进行定位，当滚动到指定位置时，元素变为fixed定位。