Почему псевдоэлемент ::before находится сверху в мобильном меню?

У меня есть меню с изображением png в качестве псевдоэлемента ::before, и вместо того, чтобы прилипать к пунктам меню, оно идет сверху.

const menu_button = $('img');
const menu_nav = $('#myNav');

menu_button.click(function(){
  menu_nav.toggleClass('menu_open')
});

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #d6cece;
  overflow-y: auto;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 10%;
  width: 100%;
  margin-top: 50px;
}

.overlay a {
  padding-left: 30px;
  padding-bottom: 5px;
  padding-top: 5px;
  text-decoration: none;
  font-size: 27px;
  display: block;
  transition: 0.3s;
  font-style: italic;
  color: black;
}

.overlay-content a:before {
  width: 6px;
  content: " ";
  background-image: url(https://picsum.photos/5);
  background-repeat: no-repeat;
  position: absolute;
  left: 18px;
  top: 18px;
  height: 20px;
}

.menu_open {
  height: 100%;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src = "https://picsum.photos/100">

<div id = "myNav" class = "overlay">
  <div class = "overlay-content">
    <a href = "#">Test</a>
    <a href = "#">Test</a>
    <a href = "#">Test</a>
    <a href = "#">Test</a>
  </div>
</div>

Почему такое поведение? Он работает без меню, но не когда элементы выровнены по вертикали. Пожалуйста, проверьте фрагмент, который я быстро сделал.

javascript html css

27.05.2019 05:54

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

наверное должно быть что-то вроде этого

.overlay-content > a:before { 
    content: "";
    display: block;
    background: url("https://picsum.photos/5") no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
}

а затем измените это на

.overlay-content a:before {
  width: 6px;
  content: " ";
  background-image: url(https://picsum.photos/5);
  background-repeat: no-repeat;
  position: absolute;
  left: 18px;
  top: 18px;
  height: 20px;
}

Я не понимаю, это вообще не изменило поведение ::before, просто меню выглядело совершенно по-другому, не хотите уточнить?

— 27.05.2019 06:05

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

— 27.05.2019 06:07

это сработало для вас? если да, подтвердите ответ

— 28.05.2019 15:12

Не совсем, извините.

— 30.05.2019 04:35

27.05.2019 06:01

Ответ принят как подходящий

элементы идут «сверху», потому что вы устанавливаете top на 18px для всех элементов.

это не было бы проблемой, если бы контекст позиционирования для абсолютного позиционирования был установлен правильно (элемент a вместо overlay-content div).

вы должны установить контекст позиционирования для самого элемента: