2022-04-09 HTML中固定定位、相对定位和绝对定位一句话概括

初学HTML的时候，很多同学对定位不熟悉，今天总结下主要使用的三种定位方式。

说到定位的时候，首先元素是相对标准流的，标准流即元素上下挨个排列（如块级元素），但是这种排列方式并不能满足需求，所以在这个基础上就需要定位。

定位移动元素由top、left、bottom和right控制

固定定位

position: fixed;

固定定位是相对浏览器可视化窗口的，即当前放缩浏览器所能看到的可视化窗口。常用于如在固定位置显示二维码、显示页面顶端图标等。

当然了，固定定位也可以相对于网站版面中心定位，例如先设置left: 50%，再设置margin-left: 相对div的一半width宽度px。

固定定位会脱离标准流，脱离标准流意思是其他元素未脱离标准流的元素不会受到他的影响。

相对定位

position: relative;

相对定位的意思是相对自身、相对自身、相对自身。相对自身在标准流中的位置，所以叫相对定位，当设置top等属性的时候，移动的位置是相对自身。

相对定位不会脱离标准流。

绝对定位

position: absolute;

绝对定位的使用必须在祖先元素有定位的情况下才能起作用，常用一个父div包裹住子div，如果此时父div没有设置定位，那子div是相对文档定位的，即相对body来定位的，这个很重要，要给父div设置定位方式，那么子div设置的top等属性的移动才是相对父div来移动的。

绝对定位会脱离标准流。