文章目录
十、定位（position）
1.定位的简介
定位是一种更加高级的布局手段
通过定位，可以将元素摆放到页面的任意位置
使用position属性来设置定位
可选值：
①static：默认值 元素是静止的，没有开启定位
②relative 相对定位
③absolute 绝对定位
④fixed 固定定位
⑤sticky 粘滞定位
2.相对定位（relative）
当元素的position属性值设置为relative的时候，则开启元素的相对定位。
2.1相对定位的特点
①元素开启相对定位后，如果不设置偏移量，元素不会发生任何变化。
②相对定位是参照与元素在文档流中的位置进行定位的。
③相对定位会提升元素的层级。
④相对定位不会使元素脱离文档流。
⑤相对定位不会改变元素的性质，块元素还是块元素，行内元素还是行内元素
⑥如果父元素没有定位，那么就会找到最外层的元素，直到html标签
2.2偏移量（offset）
当元素开启定位后，可以通过偏移量来设置元素的位置。（类似于margin）
可选值：
top 定位元素和定位位置上边的距离
bottom 定位元素和定位位置下边的距离
left 定位元素和定位位置左边边的距离
right 定位元素和定位位置右边的距离
定位元素垂直方向的位置由top和bottom两个属性来控制 通常情况下只会使用其中之一
top值越大，定位元素越向下移动，bottom值越大，定位元素越向上移动。
定位元素水平方向的位置由left和right两个属性来控制 通常情况下只会使用其中之一
left值越大，定位元素越向右移动，right值越大，定位元素越向左移动。
3.绝对定位（absolute）
当元素的position属性值设置为absolute的时候，则开启了元素的绝对定位。
3.1绝对定位的特点
①开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化。
②开启绝对定位后，元素会从文档流中脱离。
③绝对定位会改变元素的性质，行内元素会变成块元素。块元素的宽高被内容撑开。
④绝对定位会使元素提升一个层级。
⑤绝对定位元素是相对于其包含块进行定位的。
3.2包含块（containing block）
正常情况下：
包含块就是离当前元素最近的块元素
<div>
<div>
</div>
</div>
<div>
<span><em>hello<em></span>
</div>
绝对定位的包含块：
包含块就是离他最近的开启了定位的祖先元素。
如果所有的祖先元素都没有开启定位，则相对于根元素进行定位。根元素就是它的包含块。
html：根元素，初始包含块。
3.3绝对定位元素的位置
一般情况下水平布局：
margin-left + border-left + padding-left + width +
padding-right + border-right + margin-right = 包含块的内容区的宽度
开启绝对定位后：
left +margin-left + border-left + padding-left + width +
padding-right + border-right + margin-right + right = 包含块的内容区的宽度
此时规则和之前一样，只不过是多添加了两个值
当发生过度约束时：
如果9个值中没有auto，则自动调整right值以使等式满足。
如果有auto，则自动调整auto值，以使等式满足。
因为left 和right 默认时auto，所以如果不指定left和right，则等式不满足
会自动调整这两个值。
可以设置auto的值：
margin width left right
开启绝对定位后的垂直布局**（等式必须满足）**：
top + margin-top + border-top + padding-top + height +
padding-bottom + border-bottom + margin-bottom + top =包含块的内容区的高度
如果使元素在包含块中居中，则只需margin：auto；（方式之一）
4.固定定位[窗口定位]（fixed）
将元素的position属性设置为fixed，则开启了元素的固定定位。
固定定位也是一种绝对定位。所以固定定位的大部分特点和绝对定位一样。
与绝对定位的不同点：
固定定位永远参照于浏览器的视口就行定位。
固定定位的元素不会随网页的滚动条滚动。
5.粘滞定位（sticky）
当元素的position属性设置为sticky的时候，则开启了粘滞定位。
粘滞定位和相对定位的特点基本一致，但是粘滞定位可以在元素到达某个位置的时候将其固定。
6.继承定位（inherit）
继承父级元素的定位（父级元素是什么定位，这个元素就是什么定位）
元素的定位随着父级元素的变化而变化。
<style>
.box1{
width:200px; height:200px; position:fixed;
}
.box2{
width:100px; height:100px; position:inhert;
}
</style>
7.默认定位
定位的默认值为static
当元素没有定位的时候，默认为static。
position：；static；
8.元素的层级
对于开启了定位的元素，可以通过z-index属性来指定元素的层级
z-inde需要一个整数作为参数，值越大，元素的层级越高
元素的层级越高，则越优先显示。
如果元素的层级一样，则优先显示靠下的元素。
祖先元素的层级再高，也不会盖住后代元素。
子元素为绝对定位的时候，父元素必须是相对定位。
1778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
