Firefly Pixiv - KiraraShss
欢迎来到我的博客！这是一则示例公告。
686 字
3 分钟
绝对定位的注意点
欢迎来到我的博客！
使用 Markdown 格式编写。
今天学到了什么
- 绝对定位的注意点
注意点1
给子盒子设置绝对定位之前，父盒子的宽度，是由子盒子的宽度来撑开的。当子盒子突然设置为绝对定位之后，父盒子里面没有任何内容。这时候他的宽度会立马变为零，所以会背景颜色会“消失”
注意点2
在 CSS 绝对定位 (position: absolute) 中，top、bottom、left、right 这四个属性决定了元素相对于谁去哪里。
1. 它们相对于谁？（参考系）
绝对定位的元素会寻找离它最近的、设置了定位属性（如 relative、absolute、fixed）的父级祖先元素作为参考系。
- 在你现在的代码中：
- 你的
.item设置了position: relative;。 - 你的
span和p设置了position: absolute;。 - 结论：
span和p就是相对于粉色的.item盒子边缘跑的。
- 你的
2. 各属性详解
就像用钉子把照片钉在墙上一样，这四个属性决定了钉在哪里。
top (上偏移)
- 含义：元素的上边缘距离参考系（父级）上边缘多远。
- 你的代码：
top: -10px- 效果：
span的顶部不仅紧贴父盒子顶部，而且还往上“跑”了 10px（跑出去了）。如果此处是正数10px，就会向下缩进 10px。
- 效果：
bottom (下偏移)
- 含义：元素的下边缘距离参考系（父级）下边缘多远。
- 你的代码：
bottom: -25px- 效果：
p的底部往父盒子底部下方“跑”了 25px。同理，负值向外跑，正值向里缩。
- 效果：
left (左偏移)
- 含义：元素的左边缘距离参考系（父级）左边缘多远。
- 你的代码：
left: 50%- 效果：
p盒子的最左边那条线，正好对齐在父盒子宽度的 50%（也就是正中间）位置。 - 注意：这时候元素整体实际上是偏右的，因为是从中线开始往右画。
- 效果：
right (右偏移)
- 含义：元素的右边缘距离参考系（父级）右边缘多远。
3. 特别说明：为什么你需要 transform？
你在代码中用了一个经典的居中组合：
left: 50%;transform: translateX(-50%);- 只写
left: 50%：元素的左边框在正中间，整个元素看起来是歪向右边的。 - 加上
transform: translateX(-50%)：让元素自己往左移动自身宽度的一半。 - 结果：元素的一半在左边，一半在右边，从而实现了完美的水平居中。
图解总结
对于你的柱状图来说：
top/bottom的负值（-10px, -25px）是为了让数字和文字跑到柱子外面去。left: 50%+transform是为了让它们不管字多字少，永远居中对齐柱子。
赞助支持
如果这篇文章对你有帮助，欢迎赞助支持！
最后更新于 2026-01-30，距今已过 49 天
部分内容可能已过时