定位(position):
定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面的任意位置,我们可以使用position属性来设置定位。
position属性:
可选值:
- static
默认值,元素是静止的没有开启定位。
- relative
开启元素的相对定位
- absolute
开启元素的绝对定位
- fixed
开启元素的固定定位
- sticky
开启元素的粘滞定位
相对定位:
当元素的position
属性值设置为relative
时则开启了元素的相对定位。
相对定位的特点:
1. 开启相对定位以后,如果不设置偏移量,元素不会发生任何的变化。
偏移量(offset)
当元素开启了定位以后,可以通过偏移量来设置元素的位置。可选值:
top
定位元素和定位位置上边的距离
bottom
定位元素和定位位置下边的距离
定位元素垂直方向的位置由于top和bottom两个属性来控制,通常情况下,我们只会使用其中一个。
- top 值越大,定位元素越往下移动。
- bottom 值越大,定位元素越往上移动。
left
定位元素和定位位置右侧的距离
right
定位元素和定位位置左侧的距离
定位元素水平方向的位置由于left和right两个属性来控制,通常情况下,我们只会使用其中一个。
- left 值越大,定位元素越靠右。
- right值越大,定位元素越靠左。
2. 开启相对定位之后,元素是参照于元素在文档流中的位置进行定位的。
3. 相对定位会提升元素的层级。
4. 相对定位不会使元素脱离文档流。
5. 相对定位不会改变元素的性质,块元素还是块元素,行内元素还是行内元素。
绝对定位:
1. 开启绝对定位之后,如果不设置偏移量,元素的位置不会发生变化。
2. 开启绝对定位之后,元素会从文档流中脱离。
3. 绝对定位会改变元素的性质,行内元素会变成块元素,块的宽高会被内容撑开。
4. 绝对定位会提升元素的层级。
5. 绝对定位是相对于其包含块进行定位的。
包含块:
- 正常情况下,包含块就是距离当前元素最近的祖先块元素。
- 绝对定位的包含块就是距离他最近的开启了定位的祖先元素(potision的值不是static),如果所有的祖先元素都没有开启定位,则根元素就是它的包含块。 html (根元素、初始包含块)