本文介绍了CSS中的position属性，包括fixed（固定定位）、relative（相对定位）和absolute（绝对定位）的用法和特点，并通过实例展示了它们的定位效果。同时，详细讲解了z-index属性，用于设置元素的堆叠顺序，使理解CSS定位层次关系更为清晰。
1.position属性
position 属性规定元素的定位类型，定义建立元素布局所用的定位机制。
position常用的属性值一般有三种：
position: fixed; /*固定定位*/ position: relative; /*相对定位*/ position: absolute; /*绝对定位*/
接下来分别说明这三个属性的用法及特性，并举例说明。
1.1 固定定位fixed
当元素的position属性被设置为fixed后，可以使用top/right/bottom/left这四个属性来定位元素偏移量。 这个偏移是相对于浏览器窗口进行定位。
以下代码中的box就会出现在浏览器右下角位置。该属性常用于广告的定位。
<style>
.box {
width: 250px;
height: 250px;
border:2px solid black;
position: fixed;
bottom:10px;
right:10px;
}
</style>
<body>
<div class="box"></div>
</body>
1.2 相对定位relative
当元素的position属性被设置为relative后，可以使用top/right/bottom/left这四个属性来定位元素偏移量。 这个偏移是相对于该元素在文档流中原本的位置，不脱离文档流。 如果没有定位偏移量，对元素本身没有任何影响，依然在文档流中原先的位置。
以下代码中的box就会相对原先所在位置向右方和下方偏移了100px。
<style>
.box {
最低0.47元/天 解锁文章
扫一扫
2647
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
