Html 如何使用绝对位置作为相对位置？

我的立场是：绝对的。它旁边还有一段文字。现在我想当跨距的宽度增加时，跨距和文本之间的空间也会增加

换句话说，我不想用红色覆盖我的名字文本。怎么做

.通知{ 位置：绝对位置； 背景色：红色； } 我的名字 23 我的名字 4245 我的名字 当您使用绝对值定位时，您将从文档流中删除该元素，这意味着其他元素将忽略该元素的宽度。可以使用“位置：相对于”来定位图元，这将允许相邻图元受其尺寸的影响

如果您希望图标堆叠在数字文本下，但仍然不位于通知文本上，那么我将重新构造您的html

将堆叠在父元素div.内部的两个元素包裹起来，并将其中一个包含元素定位为绝对元素。我建议使用宽度较小的元素，在您的示例中是I元素

在您的示例中，您并不总是拥有通知元素，因此请确保在div中使用minwidth和minheight，因为位于其中的元素绝对不会占用任何空间

div{ 显示：内联块； 最小宽度：16px； 最小高度：14px； 位置：相对位置； } .通知{ 背景色：红色； 左：0； } 我{ 位置：绝对位置； 左：0； } 我的名字 23 我的名字 4245 我的名字

---

诀窍是不要使用绝对定位，仅仅因为你想隐藏其他东西。还有其他隐藏图标的方法，比如给它一个负的左边距，这将把它放在通知范围下

.通知{ 背景色：红色； 显示：内联块； 最小宽度：1米； 位置：相对位置； } .通知+i{ 左边距：-1.25em； } 我的名字 23 我的名字 4245 我的名字

---

为什么你需要绝对定位？为什么你不使用位置：相对；像这样-？把图标放在绝对定位的范围内。不！不要再认为你需要位置：绝对！好啊好啊在这里，根本不用定位。好的。唉，你的第一个例子错了。那个图标在MyName的顶部。@stack哦，对了；我错过了那个例子。我更新了答案以反映第一个答案。