position 属性指定了几种元素的定位类型
固定定位 fixed:
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
如果有多个固定定位标签,都是参考窗口,所以之间不相互影响,但可能出现图层重叠,通过 z-index 值绝对图层上下关系
绝对定位 absolute:
1、一个标签要随着父级移动而移动(子级布局完毕后相对于父级位置是静止的),且兄弟标签之间布局不影响(兄弟动,自身相对父级还是保持静止)
2、z-index 值能改变重叠的兄弟图层上下关系
3、子级相对的父级一定要 定位处理 (三种定位均可以)
父级要先于子级布局,所以子级在采用绝对定位时,父级一般已经完成了布局,如果父级采用了 定位 来完成的布局,子级自然就相当于 父级完成 绝对定位
如果父级没有采用 定位 来完成的布局,我们要后期为父级增加 定位 处理,来辅助子级 绝对定位,父级的 定位 是后期增加的,我们要
保证增加后不影响父级之前的布局,相对定位可以完成
相对定位 relative:
生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
在使用中大多数情况是父元素使用相对定位子元素使用绝对定位
相对定位也存在独立使用,但是可以用盒模型完全取代,所以一般不用
static 定位
HTML 元素的默认值,即没有定位,遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
来源:https://www.cnblogs.com/duGD/p/11129487.html