CSS中的相对定位(relative)

最新推荐文章于 2024-08-04 10:26:42 发布

蓝色的小叶子

最新推荐文章于 2024-08-04 10:26:42 发布

阅读量3.5k

点赞数 2

分类专栏： css(3)

本文链接：https://blog.csdn.net/BlueDreamerr/article/details/95756521

版权

css(3) 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本人的另一篇文章已经讲过绝对定位，这篇文章我们来说说css中的相对定位。

css中有四种定位：默认，绝对（absolute），相对（relative），固定（fixed），

话不多说，先把代码贴出来：

<!DOCTYPE html>
<html>
<head>
<title>absolute</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta charset="utf-8" />
   <style>
   *{
       margin:0;padding:0;
   }
   div{
       height:200px;
       width:200px;
   }
   div#div1{
       position:relative;/*设置为相对定位，但没有指定left、right、top、bottom其中的任意一个属性*/
       background:yellow;
   }
   div#div2{
      position:relative;/*设置为相对定位*/
       top:50px;/*指定top属性，向上偏移50px*/
       left:50px;/*指定left属性向左偏移50px*/
       background:red;
   }
   </style>
   </head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>

</html>

效果图：

解释：相对定位其实就是是相对于元素自身默认位置的一种偏移，它和绝对定位不同，它不脱离文档流，只是相对于它默认位置的一种偏移，如果不设置div2为相对定位的话，其默认位置应该是挨着div1，在div1的下方，如图所示：

元素设置了相对定位，就会相对于它默认位置进行偏移，如果只指定position:relative，而不设定left、right、bottom、top其中的属性的话，元素也是不会偏移的。另外还有一种“子绝父相”的东东，意思是给父元素设置为相对定位，再给子元素设置为绝对定位，子元素就可以在父元素的范围内进行定位和偏移。