【前端】CSS页面布局 | Position属性的选择应用

CSS定位方式总结

设置定位方式：

通过 position属性 设置元素定位方式
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

static(静态定位)

static 是 position和css默认的布局方式
排列方式：从上至下，从左至又依次排列的文档流

relative(相对定位)

relative 是在元素确定位置之后，通过 left right top bottom 设置位置偏移
但是元素所占空间仍保留在原位，其它元素不会占用其原本空间

absolute(绝对定位)

absolute 会在确定元素默认位置后，把元素移出文档流，而其它元素会挤占它原有的空间
而它会显示在原有空间的上层。

其也可以通过 left right top bottom 设置位置偏移
但是其是相对于最近包含它的元素进行偏移，它会从里往外找，如果有父级元素设置了position transform perspective属性，那么这个父级就是相对偏移对象，如果找不到，那么整个窗口就是偏移对象

设置 left right相等 ， top bottom相等，就能在容器内实现完美居中

元素本身没有宽高，会将内容的宽高设为自己的宽高！

fixed(固定定位)

脱离文档流（视窗定位）

通过 left right top bottom 设置好偏移之后，页面都会固定到同一个位置，适合固定浮窗，导航栏的布局。
元素本身没有宽高，会将内容的宽高设为自己的宽高！

sticky(粘性定位)

相当于relative和fixed的结合体
它可以将元素距离浏览器窗口一定位置时，将其固定在这个位置
而其它元素则在正常文档流中
通过设置left right top bottom 与页面距离多少时将其固定