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

Question

[krasnblj]

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

пример дизайна

Answer 1

[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;
    }
}

Comments

[Yustas Alexu]

Способ 3: transform: translate

[Finesse]

Yustas Alexu, вариант. Но так не получится элегантно сделать вылет сразу снизу и сверху, придётся добавлять transform: scale().

[Yustas Alexu]

Finesse, тогда как вариант background-clip: border-box и увеличиваем нижний и верхний прозрачный border.

[Finesse]

Yustas Alexu, как тогда фон будет заходить на соседние блоки? Придётся использовать к отрицательному margin у блока. Это уже 4-й способ.

Кстати, вариант с transform translate всё же подойдёт, если сделать фиксированную высоту родительского блока, и картинка будет выше этой высоты.

[Yustas Alexu]

Finesse, Finesse, да, с background-clip будет сложно сделать. У меня с ходу не получилось, но в теории должно получится.