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

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

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

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

Мои данные:

76b76e464b854bcf9ca9570bf41c43fb.png
<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;
}


Можно с этим как-то справиться или есть какой-то другой способ создания таких стикеров?
  • Вопрос задан
  • 991 просмотр
Решения вопроса 2
@hedint
Web разработчик
почему бы не использовать position: absolute?
Ответ написан
@lasmaster
Вся сила в самообразовании
Родителю давайте position: relative; А стикеру давайте absolute.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@Laun_MC
Используйте сетку (Bootstrap например) либо Masonry плагин. Лучше конечно использовать все вместе :)
Ответ написан
@AMK882KXX
Тем кому не подходит position: absolute могу посоветовать отрицательный margin
position: relative;
left: 100px
top: -200px;
margin-bottom: -200px;
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы