《精通CSS.DIV网页样式与布局》视频6-10课总结图：
元素定位
（1）float:left/right;
左浮动；脱离普通文档流向左浮动（即向左对齐）；float属性必须应用在块级元素上，也就是说浮动并不应用于行内元素，或者说当应用了float，那么这个元素将被指定为块级元素。
一般页面排版时大的div块都会用到float:left/right；来进行排版，但是处于页面底端的脚本div块一般都会使用clear:both;来消除浮动影响。
例如：
页面已用div分好块：#container、#banner、#content、#links、#footer（#container中包含其他div块）如下图：
若要将页面排版如下，如何用CSS设置？
——>>元素定位如下：注意float的使用
（2）position:absolute/relative;
CSS定位的原理
把浏览器窗口想象成一个坐标系统：
CSS定位的原理是：你可以将任何盒子（box）放置在坐标系统的任何位置上。
采用CSS定位技术来放置元素是非常精确的。相对于使用表格、透明图像或其他方法而言，CSS定位要简单得多。
绝对定位
一个采用绝对定位的元素不获得任何空间。这意味着：该元素在被定位后不会留下空位。
要对元素进行绝对定位，应将position属性的值设为absolute。接着，你可以通过属性left、right、top和bottom来设定将盒子放置在哪里。
举个绝对定位的例子，假如我们要在文档的四个角落各放置一个盒子：
#box1 { position:absolute; top: 50px; left: 50px;}#box2 { position:absolute; top: 50px; right: 50px;}#box3 { position:absolute; bottom: 50px; right: 50px;}#box4 { position:absolute; bottom: 50px; left: 50px;}
相对定位
要对元素进行相对定位，应将position属性的值设为relative。绝对定位与相对定位的区别在于计算位置的方式。
采用相对定位的元素，其位置是相对于它在文档中的原始位置计算而来的。这意味着，相对定位是通过将元素从原来的位置向右、向左、向上或向下移动来定位的。采用相对定位的元素会获得相应的空间。
举个相对定位的例子，我们可以相对于三张图片在页面上的原始位置来对它们进行相对定位。注意这些图片将在文档中各自的原始位置处留下空位。
#dog1 { position:relative; left: 350px; bottom: 150px;}#dog2 { position:relative; left: 150px; bottom: 500px;}#dog3 { position:relative; left: 50px; bottom: 700px;}css里的position的值relative、absolute的实际意义
position属性其实是指本体对上级的定位。默认的属性值都是static，静态。
最关键的是relative（相对）以及absolute（绝对）。
如：
<div id="A">
<div id="B">
</div>
</div>
当A的position为relative时，B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档，而是针对id为A的这个div了。
position:absolute: 绝对定位，是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的坐标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
position:relative: 相对定位，是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
注意:相对在无父级时以BODY为原始点,而绝对是以浏览器最左上角为原始点.
下面实例说明上面这句话:
<style>
#wrap{
width:500px;
background-color: red;
height:auto;
}
#column1{
position:absolute;
top:0px;
left:0px;
width:300px;
background-color: green;
}
#column2{
position:relative;
top:0px;
left:0px;
width:470px;
background-color: #FFFF66;
}
</style>
<body style="border:4px blue dotted"> /*这里我用框框出来,好识别*/
<div id="wrap">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
</div>
</body>
实现效果：
3，
z-index属性：
（1）设置元素的堆叠顺序，拥有更高堆叠顺序的元素总会处于堆叠顺序较低的元素的前面，即，z-index的值越小则所处堆叠位置越低
（2）z-index可有负值
（3）z-index仅能在定位元素上有效（例如position:absolute;）
例子：
显示效果：
——这种重叠，如果不设置z-index属性会是什么效果?
显示效果：
“后来者居上”；所以如果想改变这种重叠，就要使用z-index属性）
