一：介绍
1
2
3
| - 定位是一种更高级的布局手段
- 通过定位可以将元素放在页面的任意位置
- 使用position属性来设置定位
|
二：可选值
1
2
3
4
5
6
7
8
9
10
| 1.static
- 默认值，元素是静止的，没有开启定位
2.relative
- 开启元素的相对定位
3.absolute
- 开启元素的绝对定位
4.fixed
- 开启元素的固定定位
5.sticky
- 开启元素的粘滞定位
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| 当元素设置position:relative;后则该元素开启了相对定位。
相对定位的特点：
- 元素开启相对定位后，如果不设置偏移量则元素不会发生任何变化
- 相对定位是元素相对于元素在文档流中原来的位置进行定位的
- 相对定位会提成元素的层级
- 相对定位不会使元素脱离文档流
- 相对定位不会改变元素的性质，块元素还是块元素，行内还是行内
偏移量：
- 当元素开启定位后，可以通过设置偏移量来设置元素的定位
- 可选值，top right bottom left
- top:定位元素和定位位置上边的距离
- bottom：定位元素和定位位置下边的距离
垂直方向的位置由top和bottom来控制，一般只设置一个属性。
top越大则越向下移动，bottom越大则越向上移动
- left：定位元素和定位位置左侧的距离
- right：定位元素和定位位置右侧的距离
水平方向的位置由left和right来控制，一般只设置一个属性。
left越大则元素越向右，right越大则越向左。
偏移量的要生效必须要开启定位，要不然设置了也无效。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
| 当元素设置position:absolute;后则该元素开启了相对定位。
绝对定位的特点：
- 开启绝对定位后，如果不设置偏移量则元素的位置不会发生改变
- 开启绝对定位后，元素会脱离文档流
- 绝对定位会改变元素的性质，行内变成块，块的宽高会被内容撑开
- 绝对定位会提升元素的层级
- 绝对定位元素是相对于包含块定位的。
包含块(contaioning block)：
- 正常情况下，包含块就是里当前元素最近的祖先块元素（是块元素不是行内元素）
- 开启绝对定位的元素，包含块就是离它最近的开启了定位的祖先元素。
如果所有的祖先元素都没有开启定位，则相对跟元素（html）来定位，
html其实就是跟元素，初始包含块。
|
1
2
3
4
| 当元素设置position:fixed;后则该元素开启了固定定位。
固定定位也是一种特殊的绝对定位，唯一不同的就是固定定位永远相当于
浏览器的视口来定位。
视口也就是浏览器可见的窗口，不会随着浏览器的滚动条滚动。
|
1
2
3
4
| 当元素设置position:sticky;后则该元素开启了粘滞定位。
粘滞定位和相对定位的特点基本一致，不同的就是粘滞定位可以在元素到达某个
位置时将其固定。
|
三：层级
1
2
3
4
5
6
7
8
| 对于开启了定位的元素，可以通过z-index属性来指定元素的层级。
z-index需要一个整数作为参数，值越大元素的层级越高，元素的
层级越高则越优先显示。
如果元素的层级一样，则优先显示靠下的元素。
祖先元素的层级再高也不会盖住后代元素。
子元素的层级永远比父元素的层级高。
|
*************感谢您的阅读*************
