Как мне сделать html класс в самом низу страницы?

Question

Я новичок (не судите строго) и написал сайт-портфолио. Я создал иконки для своих социальных сетей, но они перемещаются при перемещении экрана. Мне нужно сделать так, чтобы они все время находились внизу страницы. Мой CSS-код:

body {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
}

.wrapper {
    display: flex;
    position: fixed;
    bottom: 0;
    padding: 10px;
}

.wrapper .icon {
    background: rgba(255, 224, 172, 0.9);
    border-radius: 50%;
    margin: 10px;
    width: 50px;
    height: 50px;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 -0.1px 10px black;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip {
    position: absolute;
    top: -20px;
    font-size: 15px;
    background: transparent;
    padding: 5px 8px;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
    opacity: 1;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
    text-shadow: 0px -1px 0px grey;
}

.wrapper .telegram:hover,
.wrapper .telegram:hover .tooltip,
.wrapper .telegram:hover .tooltip::before {
    background: #1877F2;
    color: #ffffff;
}

.wrapper .twitter:hover,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip::before {
    background: #000;
    color: #ffffff;
}

.wrapper .github:hover,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip::before {
    background: #333333;
    color: #ffffff;
}

.wrapper .VK:hover,
.wrapper .VK:hover .tooltip,
.wrapper .VK:hover .tooltip::before {
    background: #2700EB;
    color: #ffffff;
}

<div class="wrapper">
        <a href="#">
            <div class="icon telegram">
                <span class="tooltip">Telegram</span>
                <span><i class="fa-brands fa-telegram" style="color: #000000;"></i></span>
            </div>
        </a>
        <a href="#">
            <div class="icon twitter">
                <span class="tooltip">Twitter</span>
                <span><i class="fa-brands fa-x-twitter" style="color: #000000;"></i></spa>
            </div>
        </a>
        <a href="#">
            <div class="icon github">
                <span class="tooltip">GitHub</span>
                <span><i class="fa-brands fa-github" style="color: #000000;"></i></span>
            </div>
        </a>
        <a href="#">
            <div class="icon VK">
                <span class="tooltip">VK</span>
                <span><i class="fa-brands fa-vk" style="color: #000000;"></i></span>
            </div>
        </a>
    </div>

Пытался сделать position: fixed и bottom: 0. Скорее всего, я написал что то лишнее в коде, поэтому ничего не работает.

Answer 1

position sticky может помочь, если нужно, чтобы что-то прилипло в определенных координатах top, left и т.д.

P.s. если надо, чтобы при прокрутке они оказались в определенных координатах, например, bottom 20vh, а дальше не прокручивались.

БЛОГ НА HUSL

Как мне сделать html класс в самом низу страницы?

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