Есть ли другой способ позиционирования абсолютных элементов?

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>

Необходимо разместить тег «в пути» точно после первой вкладки, в которой есть динамический текст.На данный момент я добавил left: 67px к in-transit

Пытался left: auto это доза не работает.Есть ли другой способ добиться этого без изменения HTML?

ПРИМЕЧАНИЕ. Я не могу изменить HTML.

Answer 1

Вместо предоставления absolute позиции для special и in-transit, передайте ее оболочке 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 имеютширина, составляющая менее 50% заполняемого изображения wrap:

1. Создание link-tags обертывания flexbox с выравниванием flex-line установите на space-between.

2. Добавьте 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 2

Если вы хотите скрыть значки, вы можете просто сделать это с помощью 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>

Answer 3

wrap special & в пути 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;
}