摘要 今天小编跟大家讲解下有关CSS中Position四个属性的使用介绍 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS中Position四

今天小编跟大家讲解下有关CSS中Position四个属性的使用介绍 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS中Position四个属性的使用介绍 的相关资料，希望小伙伴们看了有所帮助。

语法: 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等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。 四个属性的详细介绍： static，默认值 说到这里我们不得不提一下一个定义——文档流，很多书对文档流这个概念只是一笔带过，没有详细解答，但我根据自己的经验和理解对它进行了总结，文档流其实就是文档的输出顺序，也就是我们通常看到的由左到右、由上而下的输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的，而float和position两个属性可以将元素从文档流脱离出来显示。 默认值就是让元素继续按照文档流显示，不作出任何改变。 relative，相对定位 位置属性被设置为relative之后，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。它可以随窗口大小变化。但大小仍然不会变。要是你设置成width:100%;height:100%;这样就会随着窗口变大变小。 比如：<div class="1"></div><div class="2"></div> 当1固定了位置。1的样式 float:left;width:100px; height:800px; 2的样式为 float:left; position：relative；margin-left:20px;width:50px; 2的位置在1的右边，距离120px. absolute，绝对定位 位置被设置为absolute后，被设置的元素会被定义到包含它的元素内的指定坐标（X坐标、Y坐标）。 比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。它不会随着窗口大小变化，只是固定在一个特定的坐标轴上面； 固定位置，fixed 在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。但是目前它在IE6中不被支持，只有IE7和Firefox浏览器可以识别

来源：爱蒂网