定位总结

一.绝对定位和相对定位

1.绝对定位

position:absolute 

2.相对定位

给父元素添加position:relative; 形成参照物
给子元素添加position:absolute 进行位置的移动。

3.

绝对定位与相对定位区别：
①：参照物：
绝对定位参照物：自身默认的位置
相对定位参照物：已经添加定位的父元素

②：布局流：
绝对定位不占据空间，破坏布局流
相对定位占据空间，不破坏布局流

二.固定定位

position:fixed; 
a: 参照物：浏览器窗口。
b: 不占据空间，脱离布局流。

让一个元素在浏览器窗口左右上下居中？
第一种方法：
position:fixed;
left:50%;top:50%;
margin-left:-元素宽度一半;
margin-top:-元素高度的一半;

第二种方法：
position:fixed;
left:0;right:0;
top:0;bottom:0;
margin:auto;

三.粘性定位

position:sticky;

执行逻辑：
默认情况下：当浏览器窗口滚动条不滚动，（当前元素没有超出整个浏览器窗口的时候
执行的position:relative;如果元素超出当前窗口则应用的position:fixed;）