CSS-position: relative相对定位

王十四兄

已于 2023-01-02 14:23:34 修改

阅读量236

点赞数 2

分类专栏： css 文章标签： css html 前端 web css3

于 2022-11-15 22:29:59 首次发布

本文链接：https://blog.csdn.net/weixin_64933233/article/details/127875551

版权

css 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

文章目录

相对定位

相对定位

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        position: relative;
        left: 100px;
        top: 200px;
      }
      .box3 {
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
      }
      .s1 {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <span class="s1">我是一个span</span>
  </body>
</html>

请添加图片描述

1. 定位说明

定位指的就是将指定的元素摆放到页面的任意位置
- 通过定位可以任意的摆放这个元素
通过 position 属性来设置元素的定位
可选值：
- static：默认值，元素没有开启定位
- relative：开启元素的相对定位
- absolute：开启元素的绝对定位
- fixed：开启元素的固定定位(也是绝对定位的一种)

2. 相对定位说明

当元素的 position 属性设置为 relative 时，则开启了元素的相对定位

当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
相对定位是相对于元素在文档流中原来的位置进行定位
相对定位的元素不会脱离文档流
相对定位会使元素提升一个层级
相对定位不会改变元素的性质，块还是块，内联还是内联

position: relative;

3. 相对定位的偏移量

当开启了元素的定位(position 属性值是一个非 static 的值)时
可以通过 left right top bottom 四个属性来设置元素的偏移量
- left：元素相对于其定位位置的左侧的偏移量
- right：元素相对于其定位位置的右侧的偏移量
- top：元素相对于其定位位置的上边的偏移量
- bottom：元素相对于其定位位置的下边的偏移量
通常偏移量只需要使用两个就可以对一个元素进行定位
- 一般选择水平方向的偏移量和垂直方向的偏移量为一个元素进行定位