HTML：CSS定位

课程目标

• 理解为什么需要定位
• 掌握CSS定位的组成
• 掌握偏移量的设定
• 掌握定位的4种模式
• 掌握每种定位模式特点和参照位置 

 为什么需要定位？

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

 定位的组成

 偏移量

 开启定位

语法规则

选择器{     position:定位模式 }

 定位模式

 1.静态定位

 div{       position: static;    }

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

 2.相对定位(relative)

 div{       position: relative;    }

特点：

• 1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何变化
• 2.相对定位会提升元素的层级。
• 3.相对定位不会使元素脱离文档流。
• 4.相对定位不会改变元素的性质块还是块，行内还是行内。

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

 3.绝对定位(absolute)

 div{       position: absolute;    }

特点：

• 1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化。
• 2.开启绝对定位后，元素会从文档流中脱离。
• 3.绝对定位会改变元素的性值，行内变成块，块的高度被内容撑开的。
• 4.绝对定位会使元素提升一个层级。

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

 4.固定定位(fixed)

 div{       position: fixed;    }

特点：

• 1.固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样。
• 2.固定定位不占有原先位置，脱离标准流。
• 3.固定定位的元素不会随网页的滚动条滚动。

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

 5.粘滞定位(sticky)

 div{       position: sticky;    }

特点：

• 1.粘滞定位和相对定位的特点基本一致。
• 2.粘性定位占用原有的位置
• 3.不同的是粘滞定位在元素到达某一个位置时就将其固定。

 

定位模式	是否脱流	是否提升层级	参照位置
static	否	是	标准流
relative	否	是	文档流，自己为原点
absolute	是	是	最近的开启定位的父元素
fixed	是	是	浏览器的可视窗口
sticky	否	是	浏览器的可视窗口