相对定位 - Ivo's Inkwell

584 字

3 分钟

相对定位

2026-03-15

无标签

之前调整元素的位置只能使用margin,padding这些属性对其进行调整，例如元素的位置和周围的元素看起来高度不协调，一定是使用类似margin-top: 2px这样的方法去调整高度。但是这样必定会出现一个问题 — 如果存在父级元素，父级元素会受到这样移动的影响。如果想要达到移动的同时可以解决对父级元素的影响，相对定位一定是一个很好的解决方案。

概念#

相对定位的相对是相对于元素自己本身的位置，所以其原本的元素会继续保持在原本文档流的位置不动，只是显示的图片，文字等信息会进行位置的移动。

语法格式#

属性#

position：默认值是static，相对定位则是relative
top：正值：相对于原有的上边框增加多少距离（向下移动）；负值：相对于原有的上边框减少多少距离（向上移动）；优先级高于bottom
left：正值：相对于原有的左边框增加多少距离（向右移动）；负值：相对于原有的左边框减少多少距离（向左移动）；优先级高于right
bottom：正值：相对于原有的下边框增加多少距离（向上移动）；负值：相对于原有的下边框减少多少距离（向下移动）
right：正值：相对于原有的右边框增加多少距离（向左移动）；负值：相对于原有的右边框减少多少距离（向右移动）
z-index：层级顺序，层级顺序相同时，书写位置靠后的默认层级更高

格式#

1
.elements {
2
    position: relative;
3
    top: 10px;
4
    left: 20px;
5
}

注：top和，left层级高，写法就以这两个属性来写，另外两种的属性皆可实现相同效果

案例#

我觉得对话框这样的一个案例是其中可以写的东西最多的，于是只使用了这一个

以下是源码：

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>对话框</title>
6
    <style>
7
      * {
8
        margin: 0;
9
      }
10
      .tip {
11
        width: 150px;
12
        height: 80px;
13
        border: 4px solid red;
14
        border-radius: 6px;
15
        margin: 50px auto;
16
      }
17
      .triangle {
18
        width: 10px;
19
        height: 10px;
20
        border: 4px solid red;
21
        position: relative;
22
        left: 50%;
23
        top: -10px;
24
        transform: translate(-50%) rotate(45deg);
25
        border-bottom: none;
26
        border-right: none;
27
        background-color: #fff;
28
      }
29
    </style>
30
  </head>
31
  <body>
32
    <div class="tip">
33
      <div class="triangle"></div>
34
    </div>
35
  </body>
36
</html>