Как спозиционировать блоки в зависимости от условий?

Question

[ligisayan]

Всем привет! Есть блок в котором 4 span и картинка. 2 span с классами abs и картинка постоянные, а 2 span с классом rel могут как присутствовать, так и нет, причем расположение картинки не должно поменяться от этого (не должна смещаться!) и если нет блока rel-1 - rel-2 должен переместиться на его место. Как это можно сделать? вот фидл

<div>
  <span class="rel">rel-1</span>
  <span class="rel">rel-2</span>
  <img src="http://placehold.it/350x150">
  <span class="abs-1">abs-3</span>
  <span class="abs-2">abs-4</span>
</div>

div {
  position: relative;
  width: 350px;
  height: 150px;
}
img {
  margin-top:-50px;
}
.rel {
  position: relative;
  top: 0;
  left: 0;
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: red;
}
.abs-1,
.abs-2 {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: blue;
  position: absolute;
  top: 0;
}
.abs-1 {
  right: 0;
}
.abs-2 {
  right: 55px;
}

з.ы. в реальном примере таких блоков много и картинка подгружается динамически, поэтому ее нельзя накладывать на div + ее размеры (высота) может меняться и под ней расположены еще блоки

Comments

[Антон Нагаец]

хммм. а сейчас что не так? Элемент rel-2 встает на место rel-1 при удалении оного. Фоновая картинка стоит на месте. Или должно работать как то по другому ?

[ligisayan]

Антон Нагаец: да, при исчезновении обоих rel элементов картинка смещается наверх, т.к. у нее задан margin-top:-50px;

Answer 1

[Антон Нагаец]

Если я все правильно понял то проще использовать

div {
  position:relative;
  width:350px;
  height:150px;
  background-image:url('http://placehold.it/350x150');
}

.rel 
...

чем отдельную картинку позиционировать. И убрать картинку из HTML

Comments

[ligisayan]

Антон Нагаец в этом примере - да. но, к сожалению, этот пример много упрощенный, там картинок 1000 и 1 штука и все они подгружаются динамически. Поэтому за ваш ответ спасибо, но, к сожалению, моей проблемы он не решит..

[Антон Нагаец]

ligisayan: codepen.io/gr1mm3r/pen/grdPZr

[ligisayan]

Антон Нагаец я отмечу решение как правильное, но есть еще 1 проблема - размеры картинки (высота) могут меняться и под ней еще есть блоки, которые в случае абсолютного позиционирования налезут на нее... мой косяк - нужно и это было указать в вопросе

[Антон Нагаец]

ligisayan: давай смотреть дальше ) примерный код дать можешь ?

[ligisayan]

Антон Нагаец: да, вот такого будет достаточно https://jsfiddle.net/nzwhkzsw/2/ - уже близко к оригиналу

[ligisayan]

даже вот так - https://jsfiddle.net/nzwhkzsw/4/