position有哪几个属性，我们经常用到的2个（relative，absolute）。
最近又用到了好多，深入研究了下。
一、语法:
position：static | relative | absolute | fixed
取值:
static ：默认值，无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用，默认值。
relative：相对定位，对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。
absolute：绝对定位，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed：固定定位，对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
二、四个属性的详细介绍：
1、static，默认值
说 到这里我们不得不提一下一个定义——文档流，很多书对文档流这个概念只是一笔带过，没有详细解答，但我根据自己的经验和理解对它进行了总结，文档流其实就 是文档的输出顺序，也就是我们通常看到的由左到右、由上而下的输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的，而float和 position两个属性可以将元素从文档流脱离出来显示。
默认值就是让元素继续按照文档流显示，不作出任何改变。
2、relative，相对定位
子元素为relative（相对的）时，不参考父元素的位置，子元素不会脱离文档流，子元素参考自身位置进行定位。
3、absolute，绝对定位
位置被设置为absolute后，被设置的元素会被定义到包含它的元素内的指定坐标（X坐标、Y坐标）。
子元素为absolute（绝对的）时，当父元素为relative或absolute时，此时父元素有位置信息，子元素会脱离文档流，参考父元素的位置。当父元素为static时，子元素会脱离文档流，子元素参考body原点进行定位。
比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。它不会随着窗口大小变化，只是固定在一个特定的坐标轴上面；
4、固定位置，fixed
元素为fixed（固定的），则是固定定位，即使是子元素，也不参考父元素的位置，即以浏览器作为参考定位。相当于电脑屏幕的一只蚂蚁，你无论怎么滑动屏幕，还是在原来的位置。
三、position注意事项
1、当Position属性值为Relative时对象原来占有的位置保留，其后面 的对象按原来文档流仍然保持原来的位置Top的值表示对象相对原位置向下偏移的距离bottom的值表示对象相对原位置向上偏移的距离两者同时存在时，只有Top起作用。left的值表示对象相对原位置向右偏移的距离right的值表示对象相对原位置向左偏移的距离两者同时存在时，只有left起作用。
2、当Position属性值为absolute时对象从文档流中抽取出来，原占有的位置被后面的对象顶替上来Top的值表示对象上边框与浏览器窗口顶部 的距离bottom的值表示对象下边框与浏览器窗口底部的距离两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，即垂 直保持位置不变。left的值表示对象左边框与浏览器窗口左边的距离right的值表示对象右边框与浏览器窗口右边的距离两者同时存在时，只有left起 作用；如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。
在Position属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。
原文链接：https://www.qiquanji.com/post/8659.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知