发布时间：2025-12-10 23:54:24 浏览次数：21
position属性
position属性就是用来规定元素的定位类型,即把元素放置到一个静态的、相对的、绝对的、或固定的位置中。因此在position属性中它有四个属性值分别为:static、relative、absolute、fixed。接下来在文章中将具体介绍这四个属性值的用法及特点。
static属性值
static属性表示默认值,即没有定位,元素出现在正常的流中。忽略了top,bottom,left,right或者z-index声明
<style>
p{
width:100px;
height:100px;
border:10pxsolid#ccc;
}
p.static{
position:static;
border:10pxsolidpink;
}
</style>
</head>
<body>
<p></p>
<pclass="static">使用了position:static;</p>
</body>
效果图:
relative属性值
表示相对定位的元素,可以通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位。它是默认参照父级的原始点为原始点来定位的,若无父元素则按照上一个元素的底部为原始点进行定位。
1、相对定位不会影响元素本身特性
2、不会使元素脱离文档流(元素原本位置会被保留)
3、没有定位偏移量时对元素无影响
4、提升层级,可以使用z-index来改变一个定位元素的层级关系,从而改变元素的覆盖关系,值越大越在上面
p{
width:200px;
height:200px;
background-color:pink;
}
p.relative{
position:relative;
background-color:lightblue;
left:45px;
}
</style>
</head>
<body>
<p>父元素
<pclass="relative">子元素</p>
</p>
</body>
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流