还有其他方法可以定位绝对元素吗？

Question

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

Answer 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;
}

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

编辑：这通常是不可能的 - 但这里有一个 hack 如果我们假设 special 和 in-transit 的宽度都小于 50填满图像的百分比 wrap:

制作 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>

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

还有其他方法可以定位绝对元素吗？

Is there any other way to position absolute elements?

html

css

css-position

absolute