CSS定位

 1、定位的作用

浮动只能实现元素水平布局的效果，而定位能实现让元素实现复杂的布局效果。

2、定位的组成

定位也是用于布局的，主要由两个部分组成：     

定位=定位模式+偏移量

定位模式用于指定一个元素在文档中的定位方式。

偏移量则决定了该元素的最终位置

3、偏移量

当元素开启了定位之后，可以通过偏移量来设置元素位置

• top：定位元素和定位位置上边的距离
• bottom：定位元素和定位位置下面的边距
• left：定位元素和定位位置左侧距离
• right：定位元素和定位位置右侧距离

4、定位语法规则

选择器{
	position:定位模式
}

div{
      position: static;
   }

（1）静态定位(static)

div{
      position: static;
   }


特点：静态定位 按照标准流特性摆放位置，它没有边偏移。

（2）相对定位（relatlve）

  div{
      position: relative;
   }

特点：

1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何变化

2.相对定位会提升元素的层级。

3.相对定位不会使元素脱离文档流。

4.相对定位不会改变元素的性质块还是块，行内还是行内。

参照位置：    

 相对定位是参照于元素本身在文档流中的位置进行定位的。坐标参考系是以自己的位置（x，y）作为原点（0，0）。

(3)绝对定位（absolute）

  div{
      position: absolute;
   }

特点：

1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化。

2.开启绝对定位后，元素会从文档流中脱离。

3.绝对定位会改变元素的性值，行内变成块，块的高度被内容撑开的。

4.绝对定位会使元素提升一个层级。

参照位置：

绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（也就是body）

(3)固定位置（fixed）

  div{
      position: fixed;
   }

特点：

1.固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样。

2.固定定位不占有原先位置，脱离标准流。

3.固定定位的元素不会随网页的滚动条滚动。

参照位置：以浏览器的可视窗口为参照点移动元素。

（4）粘滞定位(sticky)

 div{
      position: sticky;
   }

特点：

1.粘滞定位和相对定位的特点基本一致。

2.粘性定位占用原有的位置

3.不同的是粘滞定位在元素到达某一个位置时就将其固定。

5、总结