css中的定位学习（position）

css中的定位学习（position）

定位（position）

定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任何位置、使用position属性设置定位

• position的可选值有：
• static 默认值 元素是静止的没有开启定位
• relative 开启元素的相对定位
• absolute 开启元素的绝对定位
• fixed 开启元素的固定定位
• sticky 开启元素的粘滞定位

偏移量（offset）

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

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

定位元素垂直方向的位置由top和bottom两个属性来控制，通常情况下，只取其一（我们只会使用其中之一），top越大越向下移动，bottom越大越向上移动，定位元素水平方向的位置由left和right两个属性控制，通常情况下，只会使用其一，left 越大元素越靠右，right 越大元素越靠左
注意上面的值要生效，必须是开启了定位position

包含块（containing block）

正常情况下,包含块就是离当前元素最近的祖先块元素,比如<div><div></div></div>

1、相对定位（position：relative；）

当元素的position属性值设置为relative时则开启了元素的相对定位
相对定位的特点：

1. 元素开启相对定位以后 如果不设置偏移量，元素不会发生任何改变
2. 相对定位是参照于元素自身在文档中的位置进行定位的
3. 相对定位会提升元素在文档流中的层级
4. 相对定位不会使元素脱离文档流
5. 相对定位不会改变元素的性质块还是快，行内还是行内

2、绝对定位（position：absolute；）

当元素的position属性设置为absolute时，则开启了元素的绝对定位。
绝对定位的特点：

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

包含块（containing block）
正常情况下,包含块就是离当前元素最近的祖先块元素,比如<div><div></div></div>
绝对定位的包含块：
就是离他最近的开启了定位的祖先元素（只要position的值不是static就是开启）如果他的祖先元素都没有开启定位，则根元素就是他的包含块
html 根元素 初始包含块

3、固定定位（position：fixed；）

将元素的position属性设置为fixed则开启了元素的固定定位，固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样，唯一不同的是固定定位永远参照于浏览器的视口进行定位的，固定定位的元素不会随着网页的滚动条滚动

4、粘滞定位（position：sticky；）

将元素的position属性设置为sticky则开启了元素的粘滞定位，粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定

注意：当元素定位开启之后，不仅要注意元素的层级（覆盖问题），偏移量的设置，还要注意元素的水平和竖直布局的恒等式（由原来的7个值，变成了9个值），其中水平方向可以设置auto的值的属性有：margin width left right。
z-index:n;
对于开启了定位的元素，可以通过z-index属性来指定元素的层级,z-index需要一个整数作为参数，值越大的元素层级越高,元素的层级越高越优先显示,当层级一样的时候会优先显示最下面的,祖先元素的层级再高也不会盖不住后代元素