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

Question

我有一个 <span> 和 position: absolute。旁边还有一段文字。现在我想要当该跨度的 width 增加时，跨度和文本之间的 space 也会增加。

换句话说，我不想用 Red-Color-Span 覆盖 "MyName" 文本 never。如何？

.notification{
    position: absolute;
    background-color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class='inbox'>
    <span class='notification'></span>
    <i class="fa fa-inbox"></i>
    MyName
</span>

<br><br>
<span class='inbox'>
    <span class='notification'>23</span>
    <i class="fa fa-inbox"></i>
    MyName
</span>

<br><br>
<span class='inbox'>
    <span class='notification'>4245</span>
    <i class="fa fa-inbox"></i>
    MyName
    </span>

其实我想要这样的东西：

.notification{
    position: absolute;
    background-color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class='inbox'>
    <span class='notification'></span>
    <i class="fa fa-inbox"></i>
    MyName
</span>

<br><br>
<span class='inbox'>
    <span class='notification'>23</span>
    <i class="fa fa-inbox"></i>
    MyName
</span>

<br><br>
<span class='inbox'>
    <span class='notification'>4245</span>
    <i class="fa fa-inbox"></i>&nbsp;&nbsp;&nbsp;&nbsp;
    MyName
</span>

Answer 1

当您使用 absolute 定位时，您会从文档流中删除该元素，这意味着它的 width 将从其他元素中被忽略。您可以使用 position: relative 来定位您的元素，这将允许相邻元素受到其尺寸的影响。 DEMO.

如果您希望 icon 位于数字文本下方 "stacked"，但仍不位于 notification 文本之上，那么我将重组您的 html.

包装将堆叠在父元素中的两个元素，div。并将其中一个包含元素定位为 absolute（我会推荐占用较少 width 的元素，在您的示例中是 i 元素）。

在你的例子中，你并不总是有 notification 元素，所以确保在 div 中使用 min-width 和 min-height，因为元素其中定位绝对不占用"space."

DEMO

div {
    display: inline-block;
    min-width: 16px;
    min-height: 14px;
    position: relative;
}

.notification {
    background-color: red;
    left: 0;
}

i {
    position: absolute;
    left: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class='inbox'>
    <div>
        <i class="fa fa-inbox"></i>
        <span class='notification'></span>
    </div>
    <span class="text">MyName</span>
</span>
<br>
<br>
<span class='inbox'>
 <div>
  <i class="fa fa-inbox"></i>
     <span class='notification'>23</span>
 </div>
 <span class="text">MyName</span>
<br>
<br>
<span class='inbox'>
    <div>
  <i class="fa fa-inbox"></i>
   <span class='notification'>4245</span>
    </div>
    <span class="text">MyName</span>
</span>

Answer 2

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

.notification {
  background-color: red;
  display: inline-block;
  min-width: 1em;
  position: relative;
}
.notification + i {
  margin-left: -1.25em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<span class='inbox'>
  <span class='notification'></span>
  <i class="fa fa-inbox"></i>
  MyName
</span>
<br>
<br>
<span class='inbox'>
  <span class='notification'>23</span>
  <i class="fa fa-inbox"></i>
  MyName
</span>
<br>
<br>
<span class='inbox'>
  <span class='notification'>4245</span>
  <i class="fa fa-inbox"></i>
  MyName
</span>

但是请注意，这取决于图标的 height/width 比率。对于其他图标，您必须同时更改通知的最小宽度和图标的边距。

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

How to use absolute position as relative?

html

css

position