Как избавиться от пустого пространства после использования position: relative?

Question

[Сергей Нижний Новгород]

Ребят, всем привет.

Какая задача: Сделать блок из 6 картинок, на каждой картинке сделать полупрозрачные стикеры, под картинкой сделать тайтл.

Какая проблема: Я оформляю стикер обычной надписью и поднимаю его в картинку через position: relative. В итоге появляется пустое место, от которого я не могу избавиться.

Мои данные:

<div class="small-12 medium-6 large-4 columns"> /* Класс Foundation */
    <img class="emotion_img" src="{% static "imagination/img400.jpg" %}"/>
    <h5 class="emotion_title"><span class="headliner_title_text">Популярное</span></h5>
    <p class="emotion_textimg">Как познать истину и стать владыкой всего живого</p>
</div>

.emotion_img{
    margin: 1rem 1rem 1rem 0;
    border: 1px;
    border-style: solid;
    border-color: #f49638;
}

.emotion_textimg{
    position: relative;
    top: -3rem;
    color: #528ebd;
    font-weight: bold;
}

.emotion_title{
    position: relative;
    top: -3rem;
    height: 2rem;
    font-weight: bold;
    background-color: #f49638;
    opacity: 0.9;
    vertical-align: middle;
}

Можно с этим как-то справиться или есть какой-то другой способ создания таких стикеров?

Answer 1

[Вячеслав]

почему бы не использовать position: absolute?

Comments

[Сергей Нижний Новгород]

Будут проблемы при адаптиве. Релатив позволяет привязать к элементу.

[Вячеслав]

Terras: вы ставите у родительского блока position:relative, и абсолютное позиционирование будет привязано к элементу.

Answer 2

[Александр]

Родителю давайте position: relative; А стикеру давайте absolute.

Answer 3

[Laun_MC]

Используйте сетку (Bootstrap например) либо Masonry плагин. Лучше конечно использовать все вместе :)

Comments

[gassmonkey]

Что за абсурд? Masonry здесь вообще неуместен.

[Laun_MC]

gassmonkey: Автор как-раз пытается сделать масонри сетку, но своими руками. И да клетки Masonry не всегда могут быть разного размера...

[gassmonkey]

Laun_MC: Если они одного размера, за каким чёртом вообще Masonry? У автора вполне обычная сетка.

[Laun_MC]

gassmonkey: Я написал про Bootstrap сетку, она предпочтительней. Потом я посмотрел на текущую реализацию автором, коротая работает так, как работает Masonry. Далее я предложил еще один вариант с Masonry, т.к. этот плагин делает это автоматически

[Laun_MC]

gassmonkey: К тому-же у автора не будут все элементы одной высоты, т.к. заголовки в будущем будут разными

[Laun_MC]

gassmonkey: Спросите у себя еще раз, что будет уместней: кривая сетка бустрапа или красиво уложенный лайаут масонри

[gassmonkey]

Laun_MC: Бутстрап в тегах не указан, так что его обсуждение тоже излишне. Всё прекрасно верстается руками, и если руки прямые, "кривой" сетка не будет. А вот городить огород из не просто ненужных, а вовсе неуместных плагинов - извращение.
В чём плюс использования Masonry в контексте вопроса? Хоть один?

[Алексей Струков]

gassmonkey: больше плагинов для бога плагинов, очевидно же)

[Stanislav]

gassmonkey: б-суперкодер

Answer 4

[AMK882KXX]

Тем кому не подходит position: absolute могу посоветовать отрицательный margin

position: relative;
left: 100px
top: -200px;
margin-bottom: -200px;