定位就是改变文档流的默认规则
块级元素与父元素同大小
块级元素占整个行
行内元素无法设置宽高
两个元素相接的地方都设置了margin 值, 那么较大的那个有效
margin collapsing, 外边距重叠, margin 重叠
...
position: static;
默认行为
position: relative;
参照自己左上角坐标, 用top\bottom\left\right 移动位置
position: absolute;
参照一个祖先元素的左上角坐标, 用top\bottom\left\right 移动当前元素的位置
参照的元素是一个Postion 值为relative\absolute 的祖先元素, 若没有就参照<body>
默认body 会和页面的边界有个margin, 所以默认样式时参照位置并不是紧贴左上角
但是如果没有使用top\bottom\left\right, 效果仅仅是不占据文档流空间
当前元素位置不变, 下方的元素顶上来占据其位置
脱离文档流(我也想参照我jiji, 但是我jiji 并不存在)
absolute 元素的margin 值只对祖先元素有效
多个absolute 元素只会重叠, 像是图层堆叠的概念
postion: fixed
不设置top\bottom\left\right, 也会呆在原地
参照当前视口定位
position: sticky
元素滚动到视口之外时, 元素自动变为fixed 效果
元素原文档流的位置在视口内, 表现为relative
元素原文档流的位置不在视口时, 表现为fixed
想当年用JavaScript 实现这个效果可费不少劲
非默认定位时, 可以控制上下\左右\前后三个维度(x轴, y轴, z轴)
使用top\bottom\left\right 修改上下\左右
使用z-index 修改前后(z 轴)
z-index 对默认定位的元素(static) 没有效果
参考:
定位
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/定位
position