position几个属性值及区别

position：static;(默认值，没有定位，出现在正常的文档流中，忽略top，left，right，bottom，z-index的声明)
relative（生成相对定位的元素，通过left，right，top，bottom的设置，相对于正常位置进行定位，可通过z-index进行层次分级）
absolute（生成绝对定位的元素，相对于static定位以外的第一个父元素定位，元素的位置可通过left，right，top，bottom的设置，可根据z-index进行层次分级）
fixed（生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置可以根据left，right，top，bottom进行规定，可通过z-index进行层级分级）

1、relative脱离正常的文本流，但是在文本流中的位置仍然存在（relative总是相对于最近的父元素，无论其父元素是何种定位方式）

image.png

image.png

2、absolute脱离正常文档流，与relative不同的是，在文档流中的位置不存在（absolute定位的层总是相对于其最近的定义为absolute或relative的父层）

image.png