CSS3 定位

定位就是给盒子设定一个目标，然后根据这个目标来设置位置。

以窗口为目标进行定位

<p style="color:blue; position: absolute; left:10px; top: 10px; z-index: 99;">我飘到了窗口距离左上角10px到位置。<p>

我飘到了窗口距离左上角10px到位置。

观察窗口左上角

• position: absolute; 一般是叫法是绝对定位。为了便于理解，这里叫为窗口定位。
• left:10px; top: 10px; 显示在窗口到位置。如果设置为bottom:0; right:0; 那个就会在窗口的右下脚显示。
• z-index: 99;层级，有时我们几个盒子重叠在一起，下层的内容就会被上层的覆盖。那么可以通过这个属性，可以把原本是下层到级别修改在最高。
• position: absolute;使用这种定位方式，如果页面够长，定位内容会被滚动条影响。如何才能跟简明教程的导航一样，一直都是窗口的最上面，无论滚动条怎么拉动。可以使用position: fixed;。

定位有时也用于页面布局，不过感觉使用起来没有 浮动布局 方便。

以父元素为目标进行定位

通常，一般被称为相对定位。

<div style="width:500px;height:500px;background:#FFF68F;position: relative;">
 <em style="position:absolute;right:0;bottom:0;">我将定位到div这个盒子的左下角</em>
</div>

效果

其实，无论相对定位还是绝对定位。都是根据目标点定位。

默认下，HTML文档被设置成position: relative;，所以我们就以文档为定位目标，元素被飘到了窗口。

只要我们把父类设置成position: relative;，我们的元素的定位目标就变成了父类。