css学习——绝对定位 -

一个武将

浏览: 64421 次
性别:
来自: 杭州

最近访客更多访客>>

louiswun

fusheng555555

flzlovexfy

gwzan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

css学习——绝对定位

博客分类：

CSS ITeye XHTML UP

下面的定义是我在51cto中摘抄的。
static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

这里只是实验了absolute定位。等把每一种定位和浮动都搞清楚之后，才能谈怎么去同时使用他们。
下面是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
	<style type="text/css">
		*{margin: 0px;padding:0px;}
		#all{height:700px;width:500px;margin-left:20px;background-color:#eee;}
		#fixed1,#fixed2,#fixed3,#fixed4,#fixed5{width:120px;height:50px;border:5px double #000;position:absolute;}
		#fixed1{background-color:#9c9;}
		#fixed2{top:20px;left:50px;background-color:#9cc;}
		#fixed3{bottom:10px;left:50px;background-color:#9cc;}
		#fixed4{top:10px;right:50px;z-index:10;background-color:#9cc;}
		#fixed5{top:20px;right:90px;z-index:9;background-color:#9c9;}
		#a,#b,#c{width:300px;height:100px;border:1px solid #000;background-color:#ccc;}
    </style>
  </head>
  <body>
      
    <div id="up" style="width:100%;height:100px;border:3px solid #009; background-color:#CC3">
    
    </div>
    <div style="position:absolute;width:100%;height:100px;border:3px solid #009; background-color:#F39">
    	红色的div
    </div>
  	<div id="all">
    	<div id="a" style="z-index:1000;">第1个无定位的div容器，被红色绝对定位的div遮盖了</div>
    	<div id="fixed1">第1个固定的div容器</div>
        <div id="fixed2">第2个固定的div容器</div>
        <div id="fixed3">第3个固定的div容器</div>
        <div id="fixed4">第4个固定的div容器</div>
        <div id="fixed5">第5个固定的div容器</div>
        
        <div id="b">第2个无定位的div容器</div>
        <div id="c">第3个无定位的div容器</div>
    </div>
	
    <input type="button" value="点击隐藏最上面的div"/>
    <script type="text/javascript">
		$(function(){
			$("input").click(function(){
				$("#up").hide();
			});
		});
	</script>
</body>
</html>

红色的div定位属性是绝对定位的，那么它就在原本的文档流里面脱离出来了，不在占用原来的位置，它后面的兄弟块就会占用它原来的空间。表现形式就是后面的内容提上来了。如图所示：红色的div把第1个无定位的div容器遮盖掉了。

可以给块级设置偏移位置，上图中的5个小一点的div可以在页面中的任意位置。他们都不处在原来的文档流中了。
现在来实验这个绝对定位的偏移位置是相对于那个块来定义的。
更改id为all的div的样式,如：<div id="all" style="position:absolute;">。

如图，all块级元素和红色的块级元素重叠了，他们的上下位置是根据z-index来确定的。
下面来看看那5个小一点的绝对定位的div的位置，和第一幅图比较他们都处在了all块级元素的内部了。
哈哈，到这里就可以来总结一下absolut的一些特点了。
他脱离了原来的文档流，不占用原来文档流的空间。脱离出来后他们后面的基本会计元素就会上体来填补原来的位置。
如果不设置left、top、bottom等属性，他们的位置因该处于他们前面的普通块级元素的下面，就如第二副图给出的位置，他们在黄色的div的下面。
如果设置了left等属性，那么他们的位置就分两种情况：
第一种）寻找他们的父元素（父元素设置了position属性），他们的位置就相对于这个父div来确定的。
第二种）如果没有找到一个父元素设置了position属性，那么他们就关于body元素来确定他们的位置。