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

stack 发表于 Dev

堆

我有一个<span>带position: absolute。另外，它的旁边是文本。现在我想当width该跨度的增大时，跨度和文本之间的间隔也增大。

换句话说，我不希望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>

李斯特先生

诀窍是不使用绝对定位，只是因为您希望隐藏其他内容。还有其他隐藏图标的方法，例如给它提供负的左边距，这会将其放置在通知范围内。

.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>

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。