这篇文章将为大家详细讲解有关position属性值及其特点是什么，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 position属性 position属性就是
这篇文章将为大家详细讲解有关position属性值及其特点是什么，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
position属性
position属性就是用来规定元素的定位类型，即把元素放置到一个静态的、相对的、绝对的、或固定的位置中。因此在position属性中它有四个属性值分别为：static、relative、absolute、fixed。接下来在文章中将具体介绍这四个属性值的用法及特点。
static属性值
static属性表示默认值，即没有定位，元素出现在正常的流中。忽略了top,bottom,left,right或者z-index声明
<style>
div{
width:100px;
height:100px;
border:10pxsolid#ccc;
}
div.static{
position:static;
border:10pxsolidpink;
}
</style>
</head>
<body>
<div></div>
<divclass="static">使用了position:static;</div>
</body>
效果图：
relative属性值
表示相对定位的元素，可以通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。它是默认参照父级的原始点为原始点来定位的，若无父元素则按照上一个元素的底部为原始点进行定位。
1、相对定位不会影响元素本身特性
2、不会使元素脱离文档流（元素原本位置会被保留）
3、没有定位偏移量时对元素无影响
4、提升层级，可以使用z-index来改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面
div{
width:200px;
height:200px;
background-color:pink;
}
div.relative{
position:relative;
background-color:lightblue;
left:45px;
}
</style>
</head>
<body>
<div>父元素
<divclass="relative">子元素</div>
</div>
</body>
关于“position属性值及其特点是什么”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
--结束END--
本文标题: position属性值及其特点是什么
本文链接: https://www.lsjlt.com/news/89870.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0