box1
box2
box3
小编给大家分享一下Css如何实现相对定位,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联建站服务项目包括枣庄网站建设、枣庄网站制作、枣庄网页制作以及枣庄网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,枣庄网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到枣庄省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
相对定位指的是设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。
如果将box2的框 top设置为 50px,那么框将在原位置顶部下面 50像素的地方。如果 left设置为 20像素,那么会在元素左边创建 20像素的空间,也就是将元素向右移动。
只要box2设置了position为relative,box1和box3始终不会因为box2的改变而改变。
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
float: left;
margin:0 0 0 30px;
}
.box2 {
position: relative;
left: 20px;
top: 50px;
}
以上是“Css如何实现相对定位”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!