Как расположить элементы в определенном порядке?

Question

[ligisayan]

Есть блок с картинкой поверх которого находятся квадратные элементы, которые нужно расположить в следующем порядке: слева от картинки блоки скидка и хит, а справа желтый блок и блок с быстрым просмотром, причем любой из блоков может как присутствовать, так и отсутствовать (если блока со скидкой нет, то на его место сдвигается хит) и картинка не должна смещаться. Внизу картинки текст с ценником и кнопкой добавить в корзину. Сейчас проблема в следующем: если убрать блок со скидкой, то картинка подпрыгивает вверх, что быть не должно. Вопрос: как это сделать без правок html?
фидл

Answer 1

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

Фиддл
Изменения:
Оба блока .onsale и .onfeatured приведены к единому виду.
Можете сравнить.
Дальше стили добавляйте сами.

Мне только интересно накой в onsale было position:static и position:relative одновременно.

Answer 2

[Евгений Бакулин]

Общий ответ: используйте позиционирование!
См. свойство position!

Comments

[ligisayan]

Евгений Бакулин не нужно общих ответов - вы явно в задание не углублялись - там не все так очевидно! Например, картинка разно высоты - я посмотрю как вы с помощью позиционирования текст под ней разместите

[Евгений Бакулин]

ligisayan: z-index - не? Если перекрывающиеся элементы - самое то! Только z-index работает исключительно с позиционированными элементами... Так что, сначала - всё равно, position! :-)

Answer 3

[Олег]

Сверстано конечно адово, вот немного поправил, кнопку быстрого просмотра только сделайте как нужно.

Comments

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

У вас беда с position:absolute. Если добавить что либо после Верстка поедет

[Олег]

Антон Нагаец: Добавить куда?

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

Олег: парсер теги съел после первого дива что угодно. https://jsfiddle.net/gr1mm3r/ff5v7ffu/5/
ТАм надо просто полностью position убрать и все работает.

[Олег]

Антон Нагаец: Это уже пусть автор вопроса играется. Там лучше все переверстать с нуля, {z-index: -1; top: -38px} подобного кода не должно быть вообще.

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

Олег: там половина кода вообще не должна быть )

[ligisayan]

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