CSS定位属性详解

摘要

css通过设置元素的position属性对元素进行定位设置，任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

1、position属性值

position属性值	说明
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘性定位
static	静态定位

2、相对定位

（1）、相对定位是相对于自己原来的位置进行偏移，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。

注意：元素偏移后仍保留占有原来位置

.box{  position:relative}

3、绝对定位

（1）、当父元素没有设置定位时，绝对定位则以浏览器的左上角为基点进行偏移

（2）、当父元素设置了定位则以父元素左上角为基点进行偏移

（3）、如果父元素没有设置定位而父元素的父元素设置了即该元素以父的父元素左上角为几点偏移

（4）、父元素设置的定位方式无所谓，一般都是“子绝父相”

注意：元素偏移后不占用原有位置

.box{  position:absolute}

4、固定定位

（1）、跟父元素没有任何关系

（2）、不随滚动条而滚动

（4）、以浏览器可视窗口为基准进行偏移

注意：元素偏移后不占用原有位置

.box{  position:fixed;}

5、粘性定位(CSS3)

（1）、该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

（2）、当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。

（3）、元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

.box{  position:sticky;  top: 50px;}