html 定位 relative absolute fixed 介绍

relative absolute 定位介绍:
原文地址:https://www.cnblogs.com/maizigogo/p/5282373.html
fixed
原文地址:https://blog.csdn.net/lanseguhui/article/details/80536853
知识点:
1 relative 相对定位
(1) 设置了相对位置的元素,该元素还是会跟其他元素一样出现在文档流中他该出现的位置,然后我们可以给他设置偏移量,这个元素相对它在文档中的位置分的起点进行偏移.
(2) 在使用相对定位时,就算元素被偏移了,但是他仍然占据着他没有偏移前的空间.
示范图看原文
2 absolute 绝对定位
(1) 被设置了绝对定位的元素,在文档流中是不占空间的,如果元素设置了绝对定位,那么他在文档流中的位置会被删除,那么这个元素放置到哪里了?他浮起来了,其实设置了相对定位的元素也浮起来了,只是不同点是相对定位不删除他在文档流中所占据的位置,而绝对定位会删除他在文档中所占的位置.
(2) 绝对定位是如何定位的呢？1、如果它的父元素设置了除static之外的定位，比如：position：relative；position：absulote；position：fixed；，那么他就会相对它的父元素来定位，位置通过left，top，right，bottom属性来规定，如果他的父元素没有设置定位，那么就得看它的元素的父元素是否有设置定位，如果还是没有就继续想更高的祖先元素类推，总是它的定位就是相对与设置了除atatic定位之外的定位（eg：position：absulote；等）的第一个祖元素，如果所有的祖元素都没有以上三种定位中的一种定位，那么他就相对于文档body来定位（并非窗口，相对于窗口定位的是fixed）
3 fixed
fixed 定位相对于浏览器窗口进行定位