Позиционирование изображения на сайте

Question

Подскажите, как можно это реализовать. Нужно красный круг так сместит, чтобы он вышел на половину за рамки экрана вниз и вправо. Но, когда я пытался это сделать, сайт просто растягивался и появлялся скролл. Я хочу, чтобы изображение как бы обрезалось.

<body>
    <div class="wrapper">
        <div class="container">
            <header class="header">
                <img src="img/sword.jpg" alt="" class="logo">
            </header>
            <div class="main">
                <div class="main-text">
                    <div class="main-text__header">
                        Hello
                    </div>
                    <div class="main-text__body">
                        I'm HTML coder
                    </div>
                </div>
                <img src="img/samur.png" alt="" class="samur-img">
                <img src="img/red_circle.png" alt="" class="red-circle">
            </div>
        </div>
    </div>
</div>

body {
    font-family: 'Roboto', sans-serif;
    height: 100vh;
    width: 100%;
    margin: 0;

}
.wrapper {

}
.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem 0 1rem;
    display: flex;
    flex-direction: column;
}
.header {
    display: flex;
    padding-top: 1rem;
    width: 100%;
}
.logo {
    max-width: 100px;
}
.samur-img {
    position:absolute;
    bottom: 0;
    right: 0;
    max-width: 300px;
    z-index: 3;
}
.red-circle {
    position: absolute;
    z-index: 1;
}
.main-text {
    border-left: 10px solid #000;
    margin: 2rem 0 0 7rem;
    padding: 0 0 0 1rem;
}
.main-text__header {
    font-weight: 600;
    font-size: 90px;
}
.main-text__body {
    font-size: 60px;
}

Answer 1

Решил проблему. к картинке добавил position: fixed.

.red-circle {
    position: fixed;
    z-index: 1;
    right: -200px;
}

БЛОГ НА HUSL

Позиционирование изображения на сайте

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