position:absolute和position:fixed都会导致元素脱离文档流(CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位)。
position:relative是基于该元素本身原来的位置来定位的,所以,当它进行位置移动时,实际上它还是占用着原来的位置的
示例
<style type="text/css">
div {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.w {
position: relative;
left: 200px;
background-color: saddlebrown;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
如下图所示,四个div排列在一起
给第二个div加上一个w类,就成了下图这样
那个relative定位的div根据它本来所在的位置向右移动了200px,就到了第三个div的后面了,但是,显而易见的,它原本所在的位置并没有被第三个div补上,第三、四个div还是保持原位