有没有其他方法来定位绝对元素？答案

【问题标题】：Is there any other way to position absolute elements?有没有其他方法来定位绝对元素？
【发布时间】：2019-04-03 01:18:15
【问题描述】：

.wrap {
  position: relative;
}

.links-tags {
  display: flex;
}

.special,
.in-transit {
  background: #000;
  color: #fff;
  padding: 5px;
  position: absolute;
  top: 0;
  font-size: 10px;
}

.in-transit {
  left: 67px; /*Added temporarily*/ 
}

<div class="wrap">
  <img src="https://via.placeholder.com/200" alt="">
  <div class="links-tags">
    <div class="special">Lorem Ipsum</div>
    <div class="in-transit">in-transit</div>
    <div class="icon">
      <span>X</span>
      <span>Y</span>
      <span>Z</span>
    </div>
  </div>
</div>

需要将“in-transit”标签准确定位在第一个包含动态文本的标签之后。现在我已将left: 67px 添加到in-transit

试过left: auto 它不起作用。有没有其他方法可以在不改变 HTML 的情况下实现它？

注意：我无法更改 HTML。

【问题讨论】：

为什么要绝对定位in-transit？只需删除absolute 位置，它就会在动态内容之后出现...
想要将这些标签准确地放置在图像上方。还有其他职位可以在这里工作吗？
你知道图片到底有多高吗？然后你可以绝对定位links-tags和icon而不是special和in-transit。
图片可以是任意大小，没有固定尺寸。

标签： html css css-position absolute

【解决方案1】：

将 special 和 in-transit div 包装在另一个 div 标记中，并将此 div 绝对放在图像顶部。如下：

<div class="wrap">
  <img src="https://via.placeholder.com/200" alt="">
  <div class="links-tags">
    <div class="tags-wrap">
      <div class="special">Lorem Ipsum</div>
      <div class="in-transit">in-transit</div>
    </div>
    <div class="icon">
      <span>X</span>
      <span>Y</span>
      <span>Z</span>
    </div>
  </div>
</div>

.wrap {
  position: relative;
}

.links-tags {
  display: flex;
}
.tags-wrap {
  position: absolute;
  top: 0;
  left: 0;
}
.special,
.in-transit {
  background: #000;
  color: #fff;
  padding: 5px;
  font-size: 10px;
  float: left;
}

【讨论】：

无法更改 HTML

【解决方案2】：

不要为special 和in-transit 提供absolute 的位置，而是将其提供给它的包装器div links-tags - 请参见下面的演示：

.wrap {
  position: relative;
}

.links-tags {
  display: flex;
  position: absolute; /* ADDED */
  top: 0; /* ADDED */
}

.special,
.in-transit {
  background: #000;
  color: #fff;
  padding: 5px;
  /*position: absolute;*/
  top: 0;
  font-size: 10px;
}

<div class="wrap">
  <img src="https://via.placeholder.com/200" alt="">
  <div class="links-tags">
    <div class="special">Lorem Ipsum</div>
    <div class="in-transit">in-transit</div>
    <div class="icon">
      <span>X</span>
      <span>Y</span>
      <span>Z</span>
    </div>
  </div>
</div>

编辑：这通常是不可能的 - 但如果我们假设 special 和 in-transit 的宽度都小于填满 @987654329 的图像的 50%，这是一个 hack @：

使link-tags 成为一个包装flexbox，flex-line alignment 设置为space-between。
将width: 50% 添加到icon 并将其向下平移100%

请看下面的演示：

.wrap {
  position: relative;
}

.links-tags {
  display: flex;
  position: absolute; /* ADDED */
  top: 0; /* ADDED */
  flex-wrap: wrap; /* ADDED */
  height: 100%; /* ADDED */
  align-content: space-between; /* ADDED */
}

.special,
.in-transit {
  background: #000;
  color: #fff;
  padding: 5px;
  /*position: absolute;*/
  top: 0;
  font-size: 10px;
}

.icon { /* ADDED */
  width: 50%;
  transform: translateY(100%);
}

<div class="wrap">
  <img src="https://via.placeholder.com/200" alt="">
  <div class="links-tags">
    <div class="special">Lorem Ipsum</div>
    <div class="in-transit">in-transit</div>
    <div class="icon">
      <span>X</span>
      <span>Y</span>
      <span>Z</span>
    </div>
  </div>
</div>

【讨论】：

XYZ 需要在图片下方。
@dipikapatil 通常很难不更改标记，但请查看上面的 hack...
这并没有真正解决我的问题。我必须为这两个按钮添加 HTML 包装器。
很高兴知道它已修复，感谢您的跟进，您可以使用原始解决方案添加答案:)

【解决方案3】：

如果你想隐藏图标，你可以简单地使用text-indent

.wrap {
  position: relative;
}

.links-tags {
  display: flex;
  position:absolute;
  top:0;
  left:0;
}

.special,
.in-transit {
  background: #000;
  color: #fff;
  padding: 5px;
  font-size: 10px;
  position:relative;
  margin:2px;
}
.icon {
  text-indent:-100px;
}

<div class="wrap">
  <img src="https://via.placeholder.com/200" alt="">
  <div class="links-tags">
    <div class="special">Lorem Ipsum</div>
    <div class="in-transit">in-transit</div>
    <div class="icon">
      <span>X</span>
      <span>Y</span>
      <span>Z</span>
    </div>
  </div>
</div>

【讨论】：