定位是可以将元素摆放到页面中的任意位置
pisition的默认值是static,没有开启定位
position:relative 相对定位
position: absolute,绝对定位
position: fixed 固定定位
position: sticky 粘滞定位
1 相对定位
(不脱离文档流,是块元素还是块元素,行内元素还是行内元素。但是图层显示层级有提升。设置偏移量以后,相对于自己原来的位置定位)
(1)开启相对定位
position: relative
开启了以后还是没有效果,因为要设置偏移量,才会有改变。
开启相对定位不会脱离文档流,因为下面的元素没有往上挤;也不会改变元素的性质,如果脱离文档流之后,块元素不再独占一行,宽高都被内容撑开,行内元素会变成块元素,相对定位不会改变元素的性质,是块元素还是独占一行,是行内元素也是行内元素。
(2)开启定位之后,设置偏移量。
top:100px。 相对于原来位置,往下移动100px. 也就是上面有一段100px的距离
left:100px 相对于原来位置,往右移动100px,也就是左边有一段100px的距离。
(3)虽然相对定位把元素移走了,但是原来的位置还占着,没有脱离文档流,不过图层提升了。
适合场景:简单的微小定位。 移动一点点。 因为如果移动很多,原来的位置都会空出来。
例如:购物车图标
使用相对定位之后,原来占多少位置,还是占多少位置,不会把别的内容撑开,不会有改变。
不过会盖住原来的东西,会提升元素的层级
2 绝对定位
(脱离文档流,不设置偏移量位置不变,设置了偏移量之后,不相对于自己原来的位置定位,而是相对于开启了相对定位的父元素。)
(1)开启绝对定位
position: absolute;
开启以后立马脱离了文档流,文档流中下面的元素会挤上去,虽然脱离了文档流,但是没有设置偏
移量的话,元素的位置不会发生改变,所以这个开启绝对定位的元素会挡住文档流挤上来的元素。
-----意思就是,虽然脱离了文档流,但是位置没有改变。
元素性质发生了变化,不再独占一行了,宽高都会被内容撑开。
比如如果有字的话,就被字撑开。如果没有字,同时没有设置宽度,那就没有东西。
(2)设置偏移量以后,是相对于开启了相对定位的父元素定位的。
为什么要给父元素开启相对定位,因为相对定位开启了以后,会开启定位,但不会对这个父元素产生影响。只要不给这个父元素设置偏移量,跟不开启定位一样,这个父元素还是在文档流中。
当然,开启fixed,sticky这些也是开启了定位。不一定非得是relative