CSS学习笔记(三)
定位
静态定位：意味着内容遵循正常从上到下的HTML流。除非你要使前面一个已经创建的absolute、relative、fixed的定位样式失效，否则你不需要指定static。
固定定位：让HTML元素脱离文档流固定在浏览器的某个位置。固定元素是创建固定工具条或者在只有某种网页滚动的特定比例的地方复制HTML框架效果的好办法。
绝对定位：凡是采用position:absolute；之后，对象便开始进行绝对定位，绝对定位主要通过设置对象的top,right,bottom和left四个方向的边距值来实现。一旦对象被设置绝对定位，它就完全脱离了文档流与浮动模型，独立于其他对象而存在。其中设置对象的z-index属性，可以决定重叠的先后顺序，也是Z轴顺序。
注意：浮动和绝对或者固定的定位不可能同时作用在同一个元素上。
相对定位：相对定位就是浮动定位与绝对定位的扩展方式。相对定位使得被设置元素保持与其原始位置相对，并不破坏其原始位置的信息(其原始的占位信息还存在于文档流及浮动对象之中)。其position属性被设置为：relative；
如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#a, #b, #c, #d {
background-color: #eee;
border: 2px solid #aaa;
width: 100px;
height: 100px;
margin: 2px 2px 2px 0px;
float: left;
}
#b {
position: absolute;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div id="a">
a
</div>
<div id="b">
b
</div>
<div id="c">
c
</div>
<div id="d">
d
</div>
</body>
</html>
不占位的相对定位：
如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#divGroup{
margin:50px 0 0 50px;
position:relative;
border:1px solid #000;
width:400px;
height:200px;
}
#a, #b, #c, #d {
background-color: #eee;
border: 2px solid #aaa;
width: 100px;
height: 100px;
margin: 2px 2px 2px 0px;
float: left;
}
#b {
position: absolute;
left: 10px;
top: 30px;
}
</style>
</head>
<body>
<div id="divGroup">
<div id="a">
a
</div>
<div id="b">
b
</div>
<div id="c">
c
</div>
<div id="d">
d
</div>
</div>
</body>
</html>
效果：
绝对定位是指：相对父容器的绝对定位
何时选用绝对与相对定位：
绝对定位与相对定位在实际应用中并不常用，只存在于一些特殊情况下。绝对定位用于网页位置全部固定，而不希望采用margin，padding，border等属性进行控制。一般有下在下列情况下使用：
- 不规则网页设计
- 在画面上设计
- 交互式设计