绝对定位 - Ivo's Inkwell

654 字

3 分钟

绝对定位

2026-03-15

Web前端笔记

无标签

在使用相对定位对元素进行微调之后，在相对定位的元素内就可以对内部的组件进行很轻易的左右对齐和上下移动等等操作。但是相较于相对定位，在很多概念上面其实并不是非常一致，例如普通文档流中和定位上下文（包含块）等。

概念#

相对定位	绝对定位
相对于元素自己本身的位置。	相对于非`static`（静态）的父元素进行移动，若没有父元素或所有父元素均为`static`（静态），则默认相对于浏览器窗口进行移动。
原本的元素会继续保持在原本文档流的位置不动。	原内容会脱离正常的文档流，会对后面的元素产生一定的影响。

语法格式#

属性#

position：默认值是static，绝对定位则是absolute
top：正值：相对于父元素的上边框增加多少距离（向下移动）；负值：相对于父元素的上边框减少多少距离（向上移动）；优先级高于bottom
left：正值：相对于父元素的左边框增加多少距离（向右移动）；负值：相对于父元素的左边框减少多少距离（向左移动）；优先级高于right
bottom：正值：相对于父元素的下边框增加多少距离（向上移动）；负值：相对于父元素的下边框减少多少距离（向下移动）
right：正值：相对于父元素的右边框增加多少距离（向左移动）；负值：相对于父元素的右边框减少多少距离（向右移动）
z-index：层级顺序，绝对定位元素高于普通文档流中元素
当元素宽width和高height未定义的时候两个元素同时生效，无优先级之分

格式#

1
.elements {
2
    position: relative;
3
}
4
.elements-container {
5
  position: absolute;
6
    top: 10px;
7
    left: 20px;
8
}

案例#

我认为最实用的还是下拉菜单这样的功能，于是选取这一个。

以下是源码：

1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <style>
5
        .dropdown {
6
            position: relative;
7
            display: inline-block;
8
            margin: 20px;
9
        }
10

11
        .dropbtn {
12
            background: #3498db;
13
            color: white;
14
            padding: 12px 24px;
15
            border: none;
16
            border-radius: 4px;
17
            cursor: pointer;
18
            font-size: 16px;
19
        }
20

21
        .dropdown-content {
22
            position: absolute;
23
            top: 100%;
24
            left: 0;
25
            min-width: 160px;
26
            background: white;
27
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
28
            opacity: 0;
29
      transform: translate(0, -20px);
30
            visibility: hidden;
31
            transition: all 0.3s ease;
32
        }
33

34
        .dropdown-content a {
35
            display: block;
36
            padding: 12px 16px;
37
            text-decoration: none;
38
            color: #333;
39
            border-bottom: 1px solid #eee;
40
        }
41

42
        .dropdown-content a:hover {
43
            background: #f5f5f5;
44
        }
45

46
        .dropdown:hover .dropdown-content {
47
            opacity: 1;
48
      transform: translate(0, 0);
49
            visibility: visible;
50
        }
51
    </style>
52
</head>
53
<body>
54
    <div class="dropdown">
55
        <button class="dropbtn">下拉菜单</button>
56
        <div class="dropdown-content">
57
            <a href="#">菜单项 1</a>
58
            <a href="#">菜单项 2</a>
59
            <a href="#">菜单项 3</a>
60
            <a href="#">菜单项 4</a>
61
        </div>
62
    </div>
63
</body>
64
</html>