Почему не работает позиционирование?
Здрасте. Не работает позиционирование элементов (или скорее всего я делаю неправильно). Можете глянуть в чём проблема если не сложно.
Вот так должен выглядеть блок
<!-- BURGER BTN --> <div class="head-header__burgerMenu"> <div></div> <div></div> <div></div> </div> |
<!-- BURGER BTN --> <div class="head-header__burgerMenu"> <div></div> <div></div> <div></div> </div>
/* --BURGER BTN */ .head-header__burgerMenu { width: 50px; height: 25px; background-color: green; display: flex; flex-flow: wrap column; justify-content: space-between; cursor: pointer; } .head-header__burgerMenu div { width: 45px; height: 5px; background-color: red; position: relative; right: 0; transition: 0.2s all linear; } .head-header__burgerMenu div:nth-child(2) { left: 0; } .head-header__burgerMenu:hover div { left: 0; } .head-header__burgerMenu:hover div:nth-child(2) { right: 0; } |
/* --BURGER BTN */ .head-header__burgerMenu { width: 50px; height: 25px; background-color: green; display: flex; flex-flow: wrap column; justify-content: space-between; cursor: pointer; } .head-header__burgerMenu div { width: 45px; height: 5px; background-color: red; position: relative; right: 0; transition: 0.2s all linear; } .head-header__burgerMenu div:nth-child(2) { left: 0; } .head-header__burgerMenu:hover div { left: 0; } .head-header__burgerMenu:hover div:nth-child(2) { right: 0; }
Дополнительно:
Расположите все линии столбиком по центру
.head-header__burgerMenu { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; } |
.head-header__burgerMenu { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; }
Задайте размеры линиям
.head-header__burgerMenu div { width: 40px; height: 5px; background: red; } |
.head-header__burgerMenu div { width: 40px; height: 5px; background: red; }
Задайте промежутки между линиями
.head-header__burgerMenu { ... gap: 5px; } |
.head-header__burgerMenu { ... gap: 5px; }
Сместите все вправо
.head-header__burgerMenu div { transform: translateX(5px); } |
.head-header__burgerMenu div { transform: translateX(5px); }
Сместите вторую влево
.head-header__burgerMenu div:nth-child(2) { transform: translateX(-5px); } |
.head-header__burgerMenu div:nth-child(2) { transform: translateX(-5px); }
- А не получится с помощью left 0 или right 0 прижать к стенке?
- DZHAMBULAT-SAMOUCHKA, тогда располагайте полоски абсолютом.
Или если они relative, то нужно указывать относительное смещение: -5px - на пять пикселей влево от положения по умолчанию
А где у вас вообще позиционирование и вам не нужен position: relative, достаточно одного flex
snippet
- Ну если так сделать, то я не смогу сделать анимацию c помощью hover, так как transition не работает на align-items вот и ищу альтернативу
- DZHAMBULAT-SAMOUCHKA, а какую анимацию сделать хотите?
- Danny Arty, Ну уже сделал. Если интересно то верхнюю и нижнюю полоску прижать к левой стенке, а полоску по центру прижать к правой стенке при hover
- DZHAMBULAT-SAMOUCHKA, учитывая, что у вас фиксированные размеры, то можно обойтись обычным margin и не использовать align-items и align-self
- Danny Arty, Про margin я вообще не подумал, и это тоже можно считать решением
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы разобраться, почему не работает позиционирование элементов на веб-странице, необходимо учитывать несколько факторов. Вот несколько возможных причин и способы их решения:
1. Неправильное использование CSS свойств:
- Проверьте, правильно ли вы указали значение свойства position для элемента (например, position: relative, absolute, fixed).
- Убедитесь, что у элемента, который должен быть спозиционирован, заданы координаты top, bottom, left, right.
2. Конфликт позиционирования:
- Убедитесь, что соседние элементы не мешают правильному позиционированию.
- Используйте z-index, чтобы управлять порядком слоев элементов.
3. Наследование свойств:
- Проверьте, не наследует ли элемент свойства родительского элемента, которые могут влиять на его позиционирование.
4. Размеры элементов:
- Проверьте размеры элементов (высоту, ширину), возможно, элемент не позиционируется из-за неправильных размеров.
Пример кода на языке PHP с использованием тега
: <pre lang="php"> <div style="position: relative"> <div style="position: absolute;top: 10px;left: 10px">Этот элемент будет смещен на 10px сверху и слева относительно родителя</div> </div>
Если после проверки указанных выше причин проблема с позиционированием все еще остается, пожалуйста, предоставьте больше информации о вашем коде и ожидаемом результате, чтобы мы могли помочь вам более точно.