CSS3 定位

定位

定位就是元素根据一个目标来设置位置。

相对定位

<!-- relative 设置目标 -->
<div style="width: 640px; height: 200px; background: #f2f2f0; position: relative;">

 <!-- absolute 设置位置 | 设置距离 top / bottom / left / right -->
 <div style="width: 100px; height: 100px; background: #a6ed8e; position: absolute; top: 20px; left: 20px;"></div> 

</div>  

效果

绝对定位

<!-- 如果不设置目标点，默认会以窗口为定位目标  -->

<div style="width: 10px; height: 10px; background: #f76262; position: absolute; top:0; left:0;"> </div> 

z-index

<!-- 当两个元素通过定位重叠在一起时，应该优先显示哪个元素，这由元素的层级决定，改变层级可以使用 z-index 属性 -->

<div style="z-index: 1;"> </div>
<div style="z-index: 2;"> </div> <!-- 优先 -->

fixed

<!-- position: absolute; 定位的元素会受滚动条拖动影响，使用 position: fixed 定位可以跟 “简明教程” 的菜单栏一样，一直置顶 -->

<div style="position: fixed; top:0; left:0;"> 置顶 </div>