CSS 绝对定位学习
<!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=utf-8" />
<title> </title>
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="css/basic.css?ver=01" mce_href="css/basic.css?ver=01" rel="stylesheet" type="text/css" />
<mce:script type="text/javascript" src="js/util.js" mce_src="js/util.js"></mce:script>
</head>
<body>
<mce:style type="text/css"><!--
.r{position:relative;width:300px;height:300px;border:1px solid #ccc;}
.a{background-color:red;height:25px;} /*普通div,按文档流*/
.a1, .a2, .a3, .a4{position:absolute; width:100px;height:100px;} /*设置绝对定位后，会寻找position设置为relative的祖先元素，然后以它为参照物，设置偏移位置，此处为他们的父元素class=r。如果向上寻找祖先元素，没有position设置为relative的元素，则以body元素为参照物*/
.a1{left:10px;top:30px;background-color:yellow;z-index:1} /*偏移位置,左10px ，上30px z-index为z轴的索引，即如果位置重叠，则z-index数量越大，在第三维位置越大*/
.a2{left:20px;top:40px;background-color:green;z-index:2}
.a3{left:30px;top:50px;background-color:blue;z-index:3}
.a4{right:-50px;bottom:-50px;background-color:purple;} /*设为绝对定位后，可以处以祖先元素之外*/
--></mce:style><style type="text/css" mce_bogus="1"> .r{position:relative;width:300px;height:300px;border:1px solid #ccc;}
.a{background-color:red;height:25px;} /*普通div,按文档流*/
.a1, .a2, .a3, .a4{position:absolute; width:100px;height:100px;} /*设置绝对定位后
相关文档：
定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。
定位的定义：
在CSS中关于定位的内容是：position:relative | absolute | static | fixed
static 没有特别的设定，遵循基本的定位规定，不能通过z-index� ......
看到问此问题的很多，所以花点时间整理下，欢迎大家提意见，做补充修改，谢谢！
/*lesliezmz整理的方法 2010-01-19*/
当writing-mode为tb-rl 时，文档流是从上到下，从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算是一个小技巧吧。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ......
适用于只有一行文字的情况.
.ellipsis{
text-overflow:ellipsis; /*当对象内文本溢出时显示省略标记(...)*/
width:200px; height:50px;
overflow:hidden;
white-space:nowrap;
}
text-overflow是CSS3的属性，IE6以上版本、Safari、chrome 支持。它可以带2个参数：
clip [不显示省略标记（...），而是 ......
CSS 命名规范
XHTML-CSS写作建议
所有的xhtml代码小写
属性的值一定要用双引号("")括起来，且一定要有值
每个标签都要有开始和结束，且要有正确的层次
空元素要有结束的tag或于开始的tag后加上"/"
表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等
<h1> ......
margin 外边距
border 边框
padding 内边距
也就是说 设置margin 那么他所占据的空白地方会是在边框外面
设置padding 他所占据的空白地方是在边框里面
而且在IE6 一下的版本中 存在这padding 计算错误的BUG
CSS 的宽度属性本来是不包含padding的 但是 在ie下面有的时候宽度是包含padding 所以 建议在不熟悉CSS 在定位 ......
