说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框, 而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
定位属性:position
作用:检索或者设置元素的定位方式(简单来说就是改变元素位置的属性)
定位的主要方法:
1:静态定位:static
2:绝对定位:absolute
3:相对定位:relative
4:固定定位:fixed
5:黏性定位:sticky
定位的步骤:
1:给元素添加position属性,证明该元素要做位置的变化。
2:确定参照物!(通过position的属性值来确定:static\absolute\relative\fixed\sticky)
3: 确定坐标 left right top bottom
定位各方法的实际应用:
1:static 静态定位:
position的默认值,默认文本流的状态。
不会识别left right top bottom指定的坐标
该方法为默认值,一般情况下不使用,不加以简述;
2:absolute 绝对定位:
a : 参照物:按照已经有定位的父元素进行位置的变化。
b : 假如 当前没有父元素 或者 父元素没有定位的情况下,以整个文档为参照物。
c : 绝对定位,脱离文档流、不占据空间!!!
例:包含块的设置:
1:如果父元素为参照物:添加 position:relative;
2: 给要做定位的子元素 添加position:absolute;
3: relative 相对定位:
a : 参照物:自身默认的位置!
b : 始终占据空间,不会破坏文档流
例:利用定位将h3定位到h4上
4:固定定位: position :fixed;
a : 参照物:浏览器窗口
b : 脱离整个文本流。不占据空间
例:让该元素在浏览器窗口上下左右居中
5:黏性定位:position:sticky;
position:relative 和 position:fixed的结合。
如果页面没超出窗口范围,按照relative 执行
如果内容超出窗口位置,按照fixed执行。
例:可用来实现导航条吸顶效果
最后,有一些使用过程中需注意的事项:
在使用absolute过程中:
1:margin:0 auto; 不起作用。
2:float不起作用。
3:如果一个元素没有设置宽度 并且添加了绝对定位,元素宽是内容撑开的宽,如需跟随父元素的宽可给该元素添加width:100%。
定位后的元素:
1:后定位的元素会把前面定位的盖住。
2:z-index:
控制定位元素的层次关系
属性值为一个数字(可以为负数),数字越大,层次关系越高
默认值 auto;
以上是个人理解,仅供参考!