Абсолютные элементы внутри контейнера с относительным позиционированием не перемещаются при изменении размера окна.

На чтение 4 мин Опубликовано 07.10.2024

Содержание

Вопрос или проблема
Ответ или решение
Решение
Примечания

Вопрос или проблема

Я новичок в HTML/CSS, и насколько я понимаю, элемент с абсолютным позиционированием внутри контейнера с относительным позиционированием должен двигаться с ним при изменении размера окна и т.д., но это совсем не работает.

<!DOCTYPE html>
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Medlemsida</title>
    <link rel="stylesheet" href="medlem.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>West Coast Golf</h1>
        </header>
        <img src="./westcoast.png" class="logo" alt="logo"> 
            <section>
                <div class="information"><h2><u>Личная информация</u></h2>
                    <ul>
                        <li>Имя: Хассе Эрикссон</li>
                        <li>Адрес: Смятвеген 4, Линдшопинг</li>
                        <li>Номер телефона: 0705243566</li>
                        <li>Способ оплаты: Автогиро</li>
                    </ul>
                </div>
            </section>
            <section>
                <div class="medlemskap"><h2><u>Членство</u></h2>
                    <img src="./platinum.png" class="platinum" alt="платиновый">
                    <button class="button" type="button">Прекратить членство</button>
                </div>
            </section>
            <section>
            <div class="handikapp"><h2><u>Хандикап</u></h2>
                <img src="./nineteen.png" class="nineteen" alt="19">
            </div>
        </section>
    </div>
</body>
</html>

CSS

https://jsfiddle.net/g3f5s8zu

Ответ или решение

Конечно, давайте разберемся с вашей проблемой, связанной с позиционированием в HTML и CSS.

Когда вы устанавливаете элемент как position: absolute, он позиционируется относительно ближайшего родительского элемента, который имеет position: relative. Это значит, что если у вас есть контейнер с position: relative, то все элементы внутри настраиваются относительно этого контейнера.

Однако, важно понимать, что абсолютно позиционированные элементы не будут «двигаться» при изменении размеров окна, если их позиция задана с фиксированными значениями (например, top, left, right, или bottom в пикселях). Если ваше намерение — чтобы абсолютный элемент «двигался» и адаптировался при изменении размеров окна, вы можете использовать процентные значения или применять медиа-запросы для изменения стилей в зависимости от размеров экрана.

Решение

Проверьте свой CSS-код и убедитесь, что вы используете правильное позиционирование. Вот пример на основе вашего кода, который может помочь:

.container {
    position: relative;
    width: 100%;
    max-width: 1200px; /* Задайте максимальную ширину */
    margin: 0 auto; /* Центрируем контейнер */
}

.information {
    position: absolute; /* Измените на absolute, если хотите позиционировать элемент внутри .container */
    top: 20px; /* Используйте проценты для адаптивности, например, 5% */
    left: 10%; /* Или другие значения, которые вам нужны */
}

.medlemskap {
    position: absolute;
    top: 100px; /* Меняйте, настраивайте в процентах для адаптивности */
    left: 50%; /* Можно использовать 'left: 50%; transform: translateX(-50%);' для центрирования */
}

.handikapp {
    position: absolute;
    top: 200px; /* В зависимости от вашей разметки */
    left: 30%; /* Подобным образом, настройте значения */
}

Используйте процентные значения для top, left, right и bottom, чтобы размещение элементов было адаптивным.

Примечания

Если вы используете фиксированные значения в пикселях для абсолютного позиционирования, элементы не будут изменяться в зависимости от размеров окна, поэтому стоит рассмотреть возможность перехода на процентные значения.
Возможно, вам нужно будет использовать медиа-запросы, чтобы изменять стили в зависимости от размеров экрана, особенно для мобильных устройств.
Убедитесь, что все элементы находятся в одном контексте и правильно вложены.

Попробуйте внести эти изменения в ваш код и протестируйте результат. Если у вас остались вопросы, пожалуйста, не стесняйтесь задавать!