欢迎来到我的博客！#

使用 Markdown 格式编写。

今天学到了什么#

炫彩工具箱案例

父盒子设置了 display: flex;对设置了绝对定位的子盒子还生效吗#

这是一个非常经典且容易混淆的问题。

结论： display: flex 对绝对定位（position: absolute）的子元素只有部分影响，大部分 Flex 布局特性会失效。

具体来说：

脱离文档流：一旦子元素设置了 position: absolute，它就脱离了文档流。这意味着它不再参与 Flex 容器的自动空间分配（比如 flex-grow, flex-shrink 等属性对它无效）。
justify-content 和 align-items 的影响：
- 如果子元素没有设置偏移量（top/left/right/bottom）： Flex 容器的对齐属性（justify-content 和 align-items）依然会影响这个绝对定位子元素的初始位置。
  - 在你的代码中，.menu 设置了 justify-content: center; align-items: center;，且 .btn 没有设置 top/left 等。
  - 结果：.btn 会乖乖地待在 .menu 的正中心。
- 如果子元素设置了偏移量（比如 top: 0; left: 0;）：偏移量的优先级高于 Flex 对齐。子元素会直接飞到 top: 0; left: 0 的位置，完全无视 Flex 的居中设置。
父级定位基准：你注释掉了 .menu 的 position: relative;。
- 如果 .menu 没有定位属性，.btn 的 position: absolute 会向上寻找最近的已定位祖先元素作为参考点。
- 如果找不到，它就会相对于 body（或者说初始包含块）进行定位。
- 但在你的例子中，因为 .btn 没有写 top/left，它默认就停留在它在文档流中“本该在”的位置（也就是被 Flex 居中的位置）。

总结建议： 虽然 Flex 对齐能影响无偏移的绝对定位元素，但为了代码的健壮性，通常建议：

给父元素 .menu 加上 position: relative;。
如果你想让子元素居中，既然已经用了 absolute，也可以直接用 top: 50%; left: 50%; transform: translate(-50%, -50%); 来强制居中，这样就不依赖父级的 Flex 属性了。或者保留现在的写法利用 Flex 居中也是一种常见的技巧。

设置绝对定位后，如果不设置top，元素会停在原先的位置#

是的，你的理解完全正确。这是一个非常实用但经常被忽略的 CSS 特性。

原理解析#

当一个元素设置了 position: absolute，它确实会脱离文档流（不再占据空间），但是：

如果没有设置偏移量（top, left, right, bottom）：浏览器会把它渲染在它原本在普通文档流中应该出现的位置。这被称为元素的**“静态位置” (Static Position)**。
结合你的代码：
- 你的父盒子 .menu 设置了 Flex 布局居中：
```
1
display: flex;
2
justify-content: center;
3
align-items: center;
```
- 这意味着，如果子元素 .btn 和 span 不是绝对定位的话，它们本来就会被 Flex 挤到正中间。
- 当你加上 position: absolute 但不写 top/left 时，它们就乖乖地停留在那个“本该在的正中间位置”，只是不再占据物理空间了（所以它们会重叠在一起）。

总结： 利用这个特性配合 Flex 布局，是让绝对定位元素快速居中的一个非常巧妙的技巧！总结： 利用这个特性配合 Flex 布局，是让绝对定位元素快速居中的一个非常巧妙的技巧！

案例完整代码#

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>炫彩工具箱.html</title>
8
  <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4090357_z2qpnic06um.css">
9
  <style>
10
    * {
11
      margin: 0;
12
      padding: 0;
13
      list-style: none;
14
    }
15

16
    body {
17
      display: flex;
18
      justify-content: center;
19
      align-items: center;
20
      min-height: 100vh;
21
      background: #303640;
22
    }
23

24
    .menu {
25
      position: relative;
26
      width: 200px;
27
      height: 200px;
28
      display: flex;
29
      justify-content: center;
30
      align-items: center;
31
    }
32

33
    .menu .btn {
34
      position: absolute;
35
      z-index: 1000;
36
      width: 60px;
37
      height: 60px;
38
      background-color: #303640;
39
      color: #fff;
40
      border: 2px solid #fff;
41
      border-radius: 50%;
42
      display: flex;
43
      justify-content: center;
44
      align-items: center;
45
      transition: all 1.25s;
46

47
    }
48

49
    .menu .btn i {
50
      font-size: 32px;
51
    }
52

53
    .menu:hover .btn {
54
      transform: rotate(315deg);
55
    }
56

57
    .menu span {
58
      position: absolute;
59
      border: 2px solid var(--clr);
60
      border-radius: 50%;
61
      /* 分开写两个过渡 */
62
      transition: all 0.5s calc(var(--i) * 0.1s);
63
      width: 40px;
64
      height: 40px;
65
      display: flex;
66
      justify-content: center;
67
      align-items: center;
68
      color: var(--clr);
69
    }
70

71
    .menu span i {
72
      font-size: 24px;
73
      /* color: var(--clr); */
74
    }
75

76
    .menu:hover span {
77
      transform: rotate(calc(360deg / 8 * var(--i))) translateX(80px);
78
    }
79

80
    .menu:hover span i {
81
      transform: rotate(calc(-360deg / 8 * var(--i)));
82
    }
83

84
    .menu span:hover {
85
      box-shadow:
86
        0 0 10px var(--clr),
87
        0 0 30px var(--clr),
88
        0 0 50px var(--clr);
89
      background-color: var(--clr);
90
      color: #333;
91
      /* 想要阴影立马显示，所以去掉过渡 */
92
      transition: all 0s;
93
    }
94
  </style>
95
</head>
96

97
<body>
98
  <div class="menu">
99
    <div class="btn"><i class="iconfont icon-add"></i></div>
100
    <span style="--i:0;--clr: #ff2972;">
101
      <i class="iconfont icon-home"></i>
102
    </span>
103
    <span style="--i:1;--clr: #fee800;">
104
      <i class="iconfont icon-more"></i>
105
    </span>
106
    <span style="--i:2;--clr: #04fc43;">
107
      <i class="iconfont icon-gift"></i>
108
    </span>
109
    <span style="--i:3;--clr: #fe00f1;">
110
      <i class="iconfont icon-setting"></i>
111
    </span>
112
    <span style="--i:4;--clr: #00b0fe;">
113
      <i class="iconfont icon-message"></i>
114
    </span>
115
    <span style="--i:5;--clr: #fea600;">
116
      <i class="iconfont icon-cart"></i>
117
    </span>
118
    <span style="--i:6;--clr: #a529ff;">
119
      <i class="iconfont icon-money"></i>
120
    </span>
121
    <span style="--i:7;--clr: #01bdab;">
122
      <i class="iconfont icon-star"></i>
123
    </span>
124
  </div>
125
</body>
126

127
</html>

Lovely firefly!

In Reddened Chrysalis, I Once Rest

display：flex与绝对定位