一、relative position 是什么
relative position 与 static position 最大的区别是可以通过top、right、bottom、left来设置其相对位置，而 static position 是默认的正常布局方式。
当元素使用relative position时，它的位置偏移量相对于它所在的正常位置而定；如果没有提供top、right、bottom和left属性，则为0。
请看下面这个例子：
<style>
#example {
position: relative;
left: 30px;
top: 50px;
border: 1px solid black;
padding: 10px;
}
</style>
<div id="example">
<p>使用relative position css实现网页元素定位</p>
</div>
二、使用relative position实现网页元素定位的步骤
相信大家在开发过程中都会遇到各种布局问题，而使用relative position可以很好的解决一些元素的位置定位问题，下面是使用relative position实现网页元素定位的步骤：
1、给需要定位的元素设置position:relative;
2、使用top、right、bottom、left属性调整元素的位置；
请看下面这个例子：
<style>
.container {
width: 400px;
height: 400px;
background-color: #ddd;
position: relative;
}
.box {
position: relative;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: orange;
}
</style>
<div class="container">
<div class="box"></div>
</div>
三、relative position和absolute position的区别
我们在定位HTML元素时，可以使用两种方法：absolute position和relative position，为什么要使用这两种position呢？它们各有什么特点和优缺点呢？
1、absolute position
使用absolute position，元素会脱离正常流，完全根据位置属性来定位。当包含该元素的 parent element 设置position: relative时，absolute position的元素会相对于 parent element 定位，否则它会相对于文档定位。
请看下面这个例子：
<style>
#parent {
position: relative;
height: 300px;
border: 1px solid #000;
padding: 10px;
}
#box {
position: absolute;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
background-color: orange;
}
</style>
<div id="parent">
<div id="box"></div>
</div>
2、relative position
使用relative position，元素还在正常流中，也就是说它仍然占用原来的空间，只是通过调整其位置属性来改变它的位置，而绝对定位元素与之不同，它会完全脱离文档流。
请看下面这个例子：
<style>
#parent {
position: relative;
height: 300px;
border: 1px solid #000;
padding: 10px;
}
#box {
position: relative;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: orange;
}
</style>
<div id="parent">
<div id="box"></div>
</div>
四、小结
本文介绍了使用relative position css实现网页元素定位的方法和步骤，同时也介绍了相对位置与绝对位置的区别，非常适合需要用到定位功能的前端开发工程师。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/303793.html
微信扫一扫 
支付宝扫一扫 