目录
什么是定位?
定位是一种高级的布局的方式。作用:你可以将任何元素放在页面任意的位置。
如何开启定位?
position:static; 默认值,没有开启定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘滞定位
相对定位
position:relative; 偏移量(可正可负)
left:0; 元素相对于定位位置左侧距离
top:0; 元素相对于定位位置上侧距离
right:0; 元素相对于定位位置右侧距离
bottom:0; 元素相对于定位位置下侧距离
注意:通常偏移量只需要使用两个就可以对一个元素进行定位。(一般选择水平方向的一个偏移量和一个垂直方向的偏移量来为一个元素进行定位)
开启相对定位后,元素的特点有哪些?
1、开启相对定位,如果没有设置偏移量,元素的位置是不会发生变化的。
2、相对定位的原点是元素原本在文档流中位置。
3、开启相对定位后,元素的等级会提高。
4、开启相对定位, 元素不会脱离文档流,即元素的性质不会改变。(也就是块元素还是块元素,行内元素还是行内元素)
绝对定位
position:absolute; 偏移量(可正可负)
left:0; 元素相对于定位位置左侧距离
top:0; 元素相对于定位位置上侧距离
right:0; 元素相对于定位位置右侧距离
bottom:0; 元素相对于定位位置下侧距离
开启绝对定位后,元素的特点有哪些?
1、开启绝对定位后的元素会脱离文档流。即元素的性质会发生变化。(块元素不会独占一行了,行内元素也可以设置宽高了等)
2、开启绝对定位后,如果希望元素的位置发生变化,依然需要设置偏移量。
3、绝对定位是相对于其包含块来发生偏移。一般情况ÿ