CSS的定位

CSS定位

1. position: static;

默认值，表示该元素存在于文档流中。

2. position: relative;（相对定位，但不脱离文档流）

-可以指定偏移量top和left，占据的位置不变，只是显示的位置和之前有一个便宜，如果后面还有元素，和没有指定偏移量时是一模一样的。
-还可以和absolute搭配使用，给absolute元素做爸爸
-还可以和z-index配合使用：
-z-index：auto默认值(计算出来的值是0，但是和0又不一样)，不创建新层叠上下文
-z-index：0/1/2（只要比其他的元素多一个数，就会压住其他的元素）,会创建层叠上下文
-z-index：-1/-2（让自己下去）

3. position: absolute;(绝对定位)

–必须配合父元素（父元素加position，当前元素加absolute）,做一个对话框的关闭按钮，会找祖先中第一个被relative的元素，找爸爸不找爷爷，是相对于祖先元素中最近的一个定位元素定位元素定位的（只要不是static就是定位元素）
–配合z-index，和relative一样
有些浏览器不写top（bottom）和left（right）就会错乱

4. position: fixed;（相对于可视窗口定位的，即视口）

但是要是该元素的父元素有transform元素时，就会违背这个规则
手机上尽量不要用

5. position: sticky;（粘滞定位，但是兼容性很差）

页面往下滚动时，当快要看不见时，就会一直存在于可视窗口的最上方，适合做导航条
如果元素变成position，会自动跑到所有元素的最上面