Разместить блок за границей страницы

Question

Хочу отодвинуть картинку, как показано на картинке ниже

Но появляется нижний скролл, подскажите как можно его исправить, для картинки и родителя прописаны следующие стили:

.top__image {
    width: 523px;
    height: auto;
    transform: translateX(141%);
    position: absolute;
}
.top__image-img {
    position: absolute;
}

Answer 1

Используйте overflow: hidden; (в данном случае - overflow-x) для body, чтобы убрать полосы прокрутки.

Значения высоты и ширины я установил только для примера. Значение translateX установил из вопроса.

Сравните:

Без overflow: hidden;

body {
}

#parent {
    position: absolute;
    width: 523px;
    height: 523px;
    transform: translateX(141%);
    background: #0f0;
}

#child {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #00f;
}

<body>
    <div id='parent'>
        <div id='child'>
            Ребёнок
        </div>
    </div>
</body>

С overflow: hidden;

body {
    overflow-x: hidden;
}

#parent {
    position: absolute;
    width: 523px;
    height: 523px;
    transform: translateX(141%);
    background: #0f0;
}

#child {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #00f;
}

<body>
    <div id='parent'>
        <div id='child'>
            Ребёнок
        </div>
    </div>
</body>

БЛОГ НА HUSL

Разместить блок за границей страницы

Ответы (1 шт):