让我来详细讲解一下“图解CSS中position属性的定位用法”。
什么是position属性
在CSS中，position属性用于定义一个元素的定位方式。
position属性的取值有四种：
- static：默认值，表示元素正常的定位方式，即遵循文档流的方式进行排版；
- relative：相对定位，表示元素相对于自身原来的位置进行定位；
- absolute：绝对定位，表示元素相对于离它最近的定位祖先元素进行定位，如果没有定位祖先元素，则相对于文档进行定位；
- fixed：固定定位，表示元素相对于浏览器窗口进行定位，即使滚动页面，元素的位置也不会改变。
relative定位的使用
相对定位（relative）通常用于在元素原有位置上进行微调，让元素相对于自身原位置进行定位。下面是一个使用相对定位调整图片位置的例子：
<div class="container">
<img src="example.jpg" alt="例图">
<p>这里是文字说明。</p>
</div>
<style>
.container {
position: relative;
}
img {
position: relative; /* 相对定位 */
top: 10px; /* 向下偏移10px */
}
</style>
在上面的示例中，我们将父元素.container设置为相对定位，然后针对图片元素设置相对定位和向下偏移了10px，这样图片就相对于自身原来的位置下移了10px。注意到，使用相对定位，原来的元素位置仍占据了空间，因此在设置偏移量时必须考虑到原来占据的位置。
absolute定位的使用
绝对定位（absolute）通常用于在页面上固定某个元素的位置，不会随着页面滚动而改变。使用绝对定位定位前，需要一个存在的相对定位父元素作为基准点。下面是一个使用绝对定位定位浮动菜单的例子：
<nav>
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<style>
nav {
position: relative; /* 相对定位 */
height: 50px;
background-color: #f5f5f5;
}
.menu {
position: absolute; /* 绝对定位 */
top: 50px; /* 离顶部50px */
left: 0; /* 离左侧0px */
list-style: none;
display: flex;
}
.menu li {
margin-right: 20px;
}
</style>
在上面的示例中，我们将
微信扫一扫 
支付宝扫一扫 