@krasnblj

Как верстать вылезая за границы блока?

Как верстать блоки из примера: когда нарушаются горизонтальные границы, фоны налезают друг на друга?
И как делать адаптрив?

пример дизайна
5a1e002c6ae83506482759.jpeg
  • Вопрос задан
  • 343 просмотра
Пригласить эксперта
Ответы на вопрос 1
Finesse
@Finesse
Способ 1: абсолютное позиционирование

<div class="block">
    <img class="image">
</div>

.block {
    position: relative;
    overflow: visible;
}
.block .image {
    position: absolute;
    top: -100px;
    right: 200px;
}


Способ 2: отрицательные отступы

<div class="block">
    <img class="image">
</div>

.block {
    overflow: visible;
}
.block .image {
    display: inline-block;
    margin-top: -100px;
    margin-bottom: -100px;
}


В обоих способах адаптивность можно сделать с помощью @media-правил. Например:

.block .image {
    position: absolute;
    width: 300px;
    top: -100px;
    right: 200px;
}
@media (max-width: 800px) {
    .block .image {
        width: 200px;
        top: -50px;
        right: 50px;
    }
}
Ответ написан
Ваш ответ на вопрос

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

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