相对定位

最新推荐文章于 2023-04-03 23:22:34 发布

杨宗健

最新推荐文章于 2023-04-03 23:22:34 发布

阅读量1.1k

点赞数 1

分类专栏： CSS新手学习

本文链接：https://blog.csdn.net/Ameir_yang/article/details/75806746

版权

13 篇文章 0 订阅

订阅专栏

  第一节课： 

  （1）加一个position：relative； 表明是相对定位。 

  （2）相对布局不会脱离标准流（脱标），还是会在标准流中占用一定的空间。 

  （3）相对定位中有以下几种属性，相对定位结合以下几个属性使用： 

  top: ; 

  right: ; 

  bottom: ; 

  left: ; 

  （4）什么是相对定位？ 

  相对定位就是相对于自己以前在标准流中的位置来移动的。 

  实例 相对定位代码： 

  <!DOCTYPE html> 

  <html> 

  <head> 

  <meta charset="utf-8"> 

  <title>清除浮动</title> 

  <base target="_self"> 

  <style type="text/css"> 

*{

  padding: 0; 

  margin: 0; 

}

  div{ 

  width: 100px; 

  height: 100px; 

}

  .box1{ 

  background-color: red; 

}

  .box2{ 

  position: relative; 

  top: 20px; 

  left: 20px; 

  background-color: blue; 

}

  .box3{ 

  background-color: green; 

}

  </style> 

  </head> 

  <body> 

  <div class="box1"></div> 

  <div class="box2"></div> 

  <div class="box3"></div> 

  </body> 

  </html> 

  相对定位之后： 

  第二节课： 

  （1）在相对定位中同一个方向上的定位属性只能使用一个。如top和bottom属于垂直方向上的，left和right属于水平方向上的。 

  （2）由于相对定位是不脱离标准流的，所以在相对定位中是区分块级元素/行内元素/行内块级元素。 

  验证方法： 

  给一个行类元素添加： 

  width: 100px; 

  height: 100px; 

  position: relative; 属性。 看看有否有宽高变化。 

  重新添加： 

  display: block; /*将行类元素改为块级元素查看是否有宽高变化*/ 

  width: 100px; 

  height: 100px; 

  position: relative; 

  （3）由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对对定位的元素设置margin/padding等属性的时候会影响到标准流的布局。 

  第一步：没定位之前： 

  第二步：给第二个盒子（box2）添加了： position: relative; top: 20px; left: 20px; 

  第三步：给第二个盒子（box2）添加margin-bottom：20px； 

  因为margin这个属性不是给相对定位后的box2添加的，是给相对定位之前（在标准流中原来的位置）的box2添加的，所以出现的margin效果不是在相对定位后的box2的位置出现的，而是在原来的box2的位置出现的。 

  添加完margin-bottom：20px；属性后，观察box3的位置变化： 

  去除margin-bottom：20px；属性，重新添加margin-top：20px；属性： 

  margin 对应的 所有操作 都是 对 相对定位之前 的 盒子 进行的，而不是对相对定位之后的盒子进行的。 

  * margin属性 都是 添加给 相对定位之前 在原先标准流位置上的盒子的，而不是添加给相对定位之后在标准流位置上的 盒子的。 

  相对定位的应用场景： 

  （1）用于对元素进行微调； 

  （2）配合绝对定位使用； 

关注

专栏目录