position的两个属性absolute和relative

最新推荐文章于 2024-03-18 17:20:19 发布

汤立

最新推荐文章于 2024-03-18 17:20:19 发布

阅读量522

点赞数 2

分类专栏：前端杂项文章标签： HTML CSS position absolute relative

本文链接：https://blog.youkuaiyun.com/weixin_42867002/article/details/83242421

版权

前端杂项专栏收录该内容

1 篇文章

订阅专栏

position的两个属性absolute和relative的使用

*absolute   绝对的*			*relative   相对的*

1.不使用position构造两个矩形块，如下：
在这里插入图片描述
代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
 <style>
  .show-box{
   width: 250px;
   height: 250px;
   border: 1px solid black;
   display: block;
  }
  .box01{
   width: 50px;
   height: 50px;
   border: 1px solid black;
   background-color: red;
   
  }
  .box02{
   width: 50px;
   height: 50px;
   border: 1px solid black;
   background-color: yellow;
  }
  </style>
</head>
<body>
 <div class="show-box">
  <div class="box01"></div>
  <div class="box02"></div>
  </div>
</body>
</html>

2.当使用absolute将红色方块向右移动50个像素时：
.box01{position：absolut；left：50px};
在这里插入图片描述
由于红色方块使用了position中的absolute属性移动了摆脱了静态定位，此时未进行定位的黄色方块变成了唯一一个静态定位的元素占据了原来红色方块的位置。
3.当使用relative将红色方块向右移动50个像素：
.box01{position:relative;left:50px;}
在这里插入图片描述
此时虽然红色方块向右移动了50个像素，但其原来的位置并不会被占据，这是relative属性的特性之一。即原元素虽然改变了位置，但它原位置所占据的空间仍然存在。
4.在红色方块使用relative向右移动50个像素的基础上，再使用absolute将黄色方块向下移动50个像素：
.box02{position:absoulte;top:50px;}
在这里插入图片描述
这个时候发现黄色方块并没有移动，它距离黑色边界线仍然是50个像素。
5.现在改变一下代码将.box02中的absolute改为relative：

此时发现黄色方块距离黑色边界线100个像素。在没有改变top数值时为什么黄色方块会向下移动50个像素呢？这就是relative的第二个特性，即元素移动的参照物是元素本身。也就是说黄色方块是在原来的位置上向下移动了50个像素。