CSS备忘录

一、层定位

普通流、浮动和绝对定位

position : static | absolute | fixed | relative

position:satic 就是普通流(普通流中的元素的位置由元素在 HTML 中的位置决定。)

position:relative就是相对定位(相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留)

比如:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="generator" content="editplus" />
  <meta name="author" content="guanqing" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>
<style type="text/css">
<!--

#a {
    width:200px;
	height:500px;
	background:red;
	left:10px;
	top:20px;
	position:relative;
}
#b {
	width:20px;
	height:50px;
	background:green;
}
-->
</style>
<body>
<div id="b"></div>
<div id="a">
</div>
</body>
<html>

效果：a层相对于b层，相对于上面的距离是20px;相对于B的左边10px;

 image

position:absolute 表示绝对定位，将对象从文档流中拖出，也就是浮在其他的层之上。如果父的层有属性position:relative，该层浮在该父层之上，left,top的值也是相对于父层，没有则依据 body 对象。

代码：

  <meta name="description" content="" />
 </head>
<style type="text/css">
<!--
#downloadDiv{
	padding:5px;
	margin:2px;
	width:160px;
	border:1px solid #ccc;
	background:#f1f1f1;
	}
#downloadDiv{
   width:81px;
   line-height: 24px;
   left:30px;
   top:30px;
   position:absolute;
}
#a {
    width:200px;
	height:180px;
	background:red;
	
/*	position:relative;*/
}

-->
</style>
<body>
<div id="a">
<div id="downloadDiv">下载</div> 
</div>
</body>
<html>
如果a层不加positon:relative downloadDiv的position的left和top的值相对的是boday，删除注释相对的是a层。

相对boday的效果: ：

image

相对a层的效果：

image

posted @ 2011-05-23 14:54  phpzxh  阅读(321)  评论(0)  编辑  收藏  举报