css里的4个定位

css中的4个定位

前言

随便写写,大佬勿喷

一、定位是什么？

利用css定位，来获取标签的正常位置，从而得到父元素和其他浏览器的相对位置。
控制元素在页面上显示的位置,比如让文字显示在图片上,二级菜单等等

有哪些定位,分别是什么?

1.静态定位: position:static
1-1:静态定位是元素默认的定位
代码图:

效果图:

2.固定定位: position:fixed
2-1:会脱离文档流,自身的位置也会发生变化丢失原来的位置
2-2:可以通过top bottom right left 来控制他显示的位置
2-3:无论有没有参照物,初始的位置都是窗口的左上角
2-4:使用场景:吸顶盒,导航栏菜单等
代码图:

效果图:

3.相对定位:position:relative
3-1:不脱离文档流,自身的位置不会变化和丢失(除非你移动了他,怎么移动下面有说)
3-2:可以使用,top,bottom,left,right,来控制使用了相对定位元素的显示的位置
3-3:参照物是自己本身的位置,设置了相对定位之后不操作top,bottom,left,right页面上是不会有变化的
3-4:使用场景给元素微调一下位置,比如调整伪元素,另外就是给绝对定位一个可以参照的位置
代码图:

效果图:

4.绝对定位:position:absolute
4-1: 会脱离文档流,自身的位置也会发生变化和丢失
4-2:使用top,left,bottom,right可以控制他们在页面上显示的位置
4-3:设置了绝对定位之后,如果他的父元素不是静态定位(上面说了没有设置定位一般默认静态定位,不是静态定位的有:固定定位,相对定位,绝对定位),
意思就是说如果设置了绝对定位,父元素也设置,固定定位或者相对定位或者绝对定位,那么就会根据父元素为参照物来进行定位
如果父元素没有设置,固定定位,或者绝对定位,亦或者相对定位那么他会一直往上查找设置定位的祖先元素,如果找到了body,还没有找到设置定位元素,那么会依照body的为值进行定位
代码图:

效果图: