今天在做案例的时候用到了相对定位和绝对定位,简单说一下他们的区别。我们通过css做元素定位的时候要用到position,而position有4个值,分别是absolute,static,relative,fixed这四个值。
默认值为static,相对定位有relative,而剩余两种则是绝对定位。
相对定位和绝对定位的区别
既然命名不一样,那么定位的方法肯定是有去别的。我们首先来看一下不加定位的效果.
四个div的class分别为box1box2box3box4然后我们添加一下定位效果来看看。
其实可以预料到,我们如果只添加定位效果的话,除了relative没效果以外,其余的都有效果,不过都是差不多的,相当于原来的那个地方没有了元素,其余的向上替代了。
但是relative是真的没效果么?其实不然,我们需要添加一下位移效果才能看出来。简单添加上top:50px;left:50px后发现效果出现了。
看到这个效果,我们就可以直到了,原来relative需要添加位移效果才能体现出来。
这样再来看一下relative的解释
relative:相对于原来位置移动,元素设置此属性之后仍然处在文档流中,不影响其他元素的布局这个是相对与原来的位置进行移动的,所以我们如果不添加位移效果的话,是看不到的。 而我们使用绝对定位呢?这个就是可以直接看到效果了. 我们直接看一下使用最多的absolute的解释。
absolute:元素会脱离文档流,如果设置偏移量,会影响其他元素的位置定位实际上,这个绝对定位是要看它的父元素的设置,毕竟是子元素。 如果我们父元素不设置定位效果,那么我们的子元素就是相对于根元素来进行定位的。简单看一下效果

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<meta name="author" content="xuyunfei">
<meta name="description" content="">
<meta name="keywords" content="test,html">
<title>test</title>
<style>
div {
height: 100px;
}
.box1 {
background-color: blue;
}
.box2 {
background-color: red;
position: absolute;
left: 50px;
}
.box3 {
background-color: green;
}
.box4 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">box1box1box1box1box1box1</div>
<div class="box2">box2box2box2box2box2box2</div>
<div class="box3">box3box3box3box3box3box3</div>
<div class="box4">box4box4box4box4box4box4</div>
</body>
</html>
可以看到实际上,定位的偏移是通过right,left,top,bottom来进行位移,而如果不设置的话,那么应该不是没有变化就是空出了一个原本的位置来给后面的元素。
如果有什么不懂的可以在评论区留言,我会在看到的第一时间进行回复的。