小编给大家分享一下CSS中position的四个属性分别是什么，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
CSS position属性
总共有四个属性：
static
默认值，正常情况下就是这个属性，一般不用写。
relative
使元素偏移，使用top,right,left,bottom进行偏移，用z-index分别层次。
计算
安全
数据库
网络和加速
企业服务
<head>
<style>
div{
float: left;
width: 100px;
height: 100px;
background: pink;
text-align: center;
line-height: 100px;
margin-left: 10px;
}
.box{
position: relative;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div>1</div>
<div class="box">2</div>
<div>3</div>
</body>
relative是在自己原来的基础上进行偏移。也就是相对于自己定位。
absolute
相对于body或相对于离自己最近已定位的父元素定位。
<head>
<style>
.box1{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 100px;
left: 250px;
}
.box2{
width: 200px;
height: 200px;
background: pink;
position: relative;
top: 10px;
}
.box3{
width: 100px;
height: 100px;
background: blue;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">
2 <div class="box3">3</div>
</div>
</body>fixed
固定定位指定是 一直按照浏览器的窗口左上方进行定位的。无论鼠标怎么滚都按照你移动后浏览器窗口的左上方进行定位。 像很多官网的导航栏就用了固定定位，让它一直在顶部感受巅峰的孤独。
注意：这三种定位都会脱离文档流，用法要恰当！
看完了这篇文章，相信你对“CSS中position的四个属性分别是什么”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
