- 定位是一种更高级的定位手段
- 通过定位可以将元素摆放到任意位置
- position属性设置元素的定位
- 可选值：
- static：默认值
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
- sticky：粘滞定位
- 现在很少用定位了，不需要把布局精确到1个像素
-
相对定位
position设置为relative时，则开启了元素的相对定位
- 相对定位特点
- 不设置偏移量不会有任何变化
- 参照元素在文档流中的位置进行定位的
- 相对定位会提高元素的层级
- 不会脱离文档流
- 元素性质不变
通过4个方向属性设置元素相对于其原来位置的偏移量
position设置为absolute时，则开启了元素的相对定位
- 绝对定位的特点
- 不设置偏移量没变化
- 元素会脱离文档流
- 元素会改变性质
- 提升元素层级
- 4个方向属性相同，只不过是相对于其包含块进行定位。
- 包含块（containing block)——离当前元素最近的祖先块元素
- 绝对定位的包含块是离它最近的开启了定位的祖先元素，如果所有的元素都没有开启，则相对于根元素
开启了绝对定位元素的水平布局
- 元素开启了绝对定位，其水平方向的布局等式就需要添加left和right两个值
- 如果9个值中没有auto，则自动调整right值以使等式满足
- 如果有auto，则自动调整auto的值使等式满足
- 可以设置margin-left和margin-right为auto，使开启绝对定位的元素水平居中。前提是left和right都是0，因为left和right的值默认是auto，会自动调整这两个值
垂直布局
- 开启了绝对定位，垂直布局的等式也必须要满足
- top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度
- 利用这个特点可以使元素在父元素中垂直居中
- 可以设置margin-top和margin-bottom为auto。前提是top和bottom都为0
- 同理与上面水平布局结合，实现完全居中
固定定位
- position设置为fixed时，则开启了元素的相对定位
- 固定定位也是一种绝对定位，大部分特点和绝对定位相同
- 不同的是：
固定定位永远相对于浏览器可视窗口进行定位
固定在浏览器，滚动条不影响位置
粘滞定位
- position设置为sticky时，则开启了元素的粘滞定位
- 用之前的导航条演示，固定在某个设置的偏移量位置
z-index元素层级
- 如果定位元素的层级是一样，则 （结构上）下边的元素会盖住上边的
- 通过z-index设置元素层级，高的盖着低的。
- 对于没有开启定位的元素不能使用
- 父元素层级再高也不会盖住子元素
opacity
设置元素背景的透明度 0到1之间
若有收获，就点个赞吧
0 人点赞
