我们先来看看position这个属性
1.static（静态定位）它是position 的默认值，任意的position:static的元素是不会被特殊定位的。它表示的是出现的正常的流中（忽略了top,left,right,bottom或者是z-index的声明，如果使用了position:static的话，以上说的属性就是不会起作用的。）
2.relative（相对定位）：relative表现是和static是一样的，除非我们自己添加一些额外的属性。它是生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身的）位置进行定位的。就是总的来说是根据自己本身的定位相对移动的。并且是可以通过z-index来进行层次的分级。虽然定位为relative的元素是会偏离正常的文本流当中，但是其在文本流位置是依然存在的。其他的元素是不会受该元素的影响的，浏览器中还是会给这个偏离正常流元素一个位置。
接下来我将会附上一些代码。
<style>
.relative1 {
position: relative;
border:1px black solid;
}
.relative2 {
position: relative;
top: 20px;
left: 20px;
background-color: white;
width:100px;
height:100px;
border:1px red solid;
}
.relative3{
width:200px;
height:100px;
border:1px blue solid;
position:relative;
}
</style>
</head>
<body>
<div class="relative1">
relative1
<div class="relative2">
relative2
</div>
<div class="relative3">
relative3
</div>
</div>
我这里设置了relativel是父元素，其他是子元素。我将父元素设置为position:relative，如果我们没有给他添加额外的属性的话，那么父元素的宽度就是撑满整个浏览器的窗口了，但是如果给父元素设置宽度的大小的话，那么宽度就不是撑满整个浏览器的窗口，所以说它跟static的表现是一样的。
但是如果父元素设置为position:absolute的话，即使没有给他设定宽度，它的宽度也不会是撑满整个浏览器窗口的。
并且当relative1是relative2的父元素，但是不是relative3的父元素的时候，就会产生这样的效果的
relative2像在漂浮在上层一样 ，所以我们是可以使用z_index来设置分层的。
3.absolute
定位是脱离正常的文本流，与relative的区别是其在正常流中的位置是不再存在的。例如我们relativel设置为relative，relative2设置为absolute，relative3也设置为absolute，然后就会出现这个效果的。
relative2与relative3都相叠在一起，因为他们都设为position：absolute。所以他们在正常流中的位置是不再促在的，只能被其他元素占用的。
4.fixed
一个固定定位元素会相对于浏览器来定位的，这意味着如果页面滚动的话，它还是会停留在相同的位置上的，而且top,right,botton和left属性都是可以使用的。一个固定的元素是不会保留它原有的位置的，这也是脱离文本流的。
需要注意的是，父子关系是无法用z-index来设定上下关系 的，一定是子级在上父级在下。
1386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
