css position -relative ,absolute ,float

首先需要明白什么是文档流。文档流就是html文档中的各种html标签按在HTML中的位置，根据上下级和前后的顺序，一个一个的排列在界面上；当然根据元素的类型不一样，排列的方式会不一样，但先后顺序，显示层次关系不会改变。一旦 元素设置了Relative ,absolute ,float中任何一个，则其top，bottom，left，right属性激活，元素在文档流中位置稍稍不再服从普通规则。否则top，bottom，left，right是没用的。

Relative：不脱离z-index层，虽然位置由于top，bottom，left，right而和原来的不一样，但是不影响其他元素。也就是说，一旦位置被调走，那么改元素在原来的位置还占着，其他元素不会由于它走了，而去填补空缺。

Absolute：完全脱离z-index，文档流，其位置相对于与其最近设置了relative或设置了absolute的父元素由top，bottom，left，right精确定位。如果没有任何祖先设置了relative或absolute，则相对body元素。z-index 0 层位置会被其他元素移动填补。

Float：不脱离文档流，靠left：left/right大概的定位，对其他 元素造成影响，z-index 0 层位置会被其他元素移动填补。

元素的position属性被设置成Relative或float则其display属性为inline-block。

实例：

<html>
<head>
<style type="text/css">
div{width:10%;height:30px;margin:10px;background:gray;}
.test-relative{position :relative;top:200px;}
.test-absolute{position :absolute;top:300px;}
</style>
</head>
<body>
<div >1</div>
<div class="test-relative">2 relative</div>
<div >3</div>
<div >4</div>
<div class="test-absolute">5 absolute</div>
<div >6</div>
</body>
</html>

效果图：

posted on 2012-06-07 14:47  arg  阅读(314)  评论(0)  编辑  收藏  举报

导航