前端 - 帮看 一个 绝对定位的 偏移属性 如果是相对于 content box而言的话 该如何设置的问题？

Question

背景

https://blog.csdn.net/weixin_44350171/article/details/111076594

绝对定位的偏移属性 top left right 都是相对于 包含块的 paddingbox的外边缘而言的。

问题

如果我想实现 绝对定位元素位于 padding box的右上角。

1. 如果 绝对定位的偏移属性 top left right 是相对于 包含块的 paddingbox的外边缘而言的。
   则如下设置

.list {  padding: 1rem;}.tag {  position: absolute;  top: 0;  right: 0;}

2. 如果 绝对定位的偏移属性 top left right 是相对于 包含块的 content box的外边缘而言的。

.list {  padding: 1rem;}.tag {  position: absolute;  top:  xxx;  right: xxx;}

这个top和right 是-1rem 还是1rem？

个人理解： 应该是-1rem吧，毕竟top--->中心位置是向下为正，而这里显然是从content box的右上角往上移动，所以是-1rem

Answer 1

简单直接来说想要设置在 content-box 区域的右上角，可以套一层div去做定位……

因为如果你手动去做 top/righ 的定位置，不管你是设置了多少的固定值值，如果容器的 padding 值改变了，你还得跟着去改变这个值。
虽然 Stylus 提供了 @ 符可以直接引用属性，但是也是一个很奇怪的实现方式。毕竟只是手工去修改了定位位置，实际上定位还是按照最近的非 static 祖先的 块边界 来定位。

---

但是查看MDN中关于 left 值的说明，可以看到一行这样的说明：

当 left 和 right 同时指定时，元素的位置会被重复指定。当容器是从左到右时， left 的值会被优先设定；当容器是从右到左时， right 的值会被优先设定。

所以可以调整内容元素的布局方向来实现OP期望的需求，比如说：
CodepenDemo

以防Demo失效，以下是简单的结构代码：

但是这样的绝对定位感觉没啥用啊，除了说可以脱离文档流。如果要继续基于 content-box 的右上角做偏移的话，就还是得给 top/right 设置计算过padding的值。或者再额外使用 transform: translate() 给元素进行偏移操作。

所以其实最合适的还是在容器内部新建一个定位用的 div 元素。

Answer 2

第2个“如果”不存在。绝对定位的偏移属性 top left right 是相对于父块级元素（严格说是最近的非static的块）的border距离而言。

第2个“如果” 如果存在，如你所说，实现tag紧贴右上角停放，是要用 -1rem 才能实现