Из-за чего плашка меню выезжает поверх остальных элементов?

Ankhena, вот сделал https://jsfiddle.net/yr1vxkwc/4/ как видно выезжающая плашка идёт поверх. Но я уже нашёл проблему, она заключалась в том, что данное выезжающее меню лежало в одном общем диве с классом top-panel. Я попробовал выезжающее меню вынести за пределы класса и стало нормально https://jsfiddle.net/yr1vxkwc/3/ единственное меню смущает, это нормально, что иконка гамбургера лежит в диве top-panel, а само выезжающее меню лежит за пределами этого дива? Т.е. с точки зрения грамотности верстки это не страшно?

Почему при нажатии кнопки гамбургер меню страница прокручивается в самое начало?

Спасибо, я тебя люблю :)

Из-за чего плашка меню выезжает поверх остальных элементов?

Рустам Байназаров, обновил код

Что использовать для гамбургер меню JS или jQuery?

Виктор Поляков, а какие камни основные?

Что использовать для гамбургер меню JS или jQuery?

xonar, возможно для тех кто знает JS для них это всего 3-4 строчки кода, а я пока знаю только HTML/CSS и хочу закрепить эти знания, прежде чем лезть в JS. Плюс ко всему прочему я дизайнер и нужно текущими проектами заниматься :)

Что использовать для гамбургер меню JS или jQuery?

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

Что использовать для гамбургер меню JS или jQuery?

Виктор Поляков, ага спасибо, тогда не понятно, почему ты написал в первом сообщении, что выбрал бы JS, если jQuery библиотека действительно облегчает жизнь. А особенно учитывая, что я владею только HTML/CSS, то до JS мне пока далеко и рано :)

Из-за чего не работает before и after?

Я добавил вместо display: inline-block; position: absolute; и тоже сработало :)

Что использовать для гамбургер меню JS или jQuery?

prgssr.ru/development/tryuki-s-psevdoklassom-targe...
изучил информацию, но не совсем понимаю, данный css прописывается для самого меню (желтого меню, которое выдвигается), но ведь в гифке, которая прикреплена там клик происходит по иконке гамбургера-меню, какой код именно для самой иконки прописывать, чтобы выехало данное меню?

Что использовать для гамбургер меню JS или jQuery?

Не совсем понял, а jQuery нужно еще как-то отдельно подключать? Я думал, что JS и jQuery подключаются к проекту по аналогии с CSS файлами или там как-то иначе процесс проходит?

Что использовать для гамбургер меню JS или jQuery?

Мне нужно исключительно для гамбургер меню. Поэтому видимо парочка скриптов. А можно еще вопрос, как создать файл JS или jQuery и привязать его к проекту? Так же через, как мы привязываем css файлы или нужно еще что-то дополнительное проделать?

Что использовать для гамбургер меню JS или jQuery?

Рустам Байназаров, спасибо

Стоит ли оборачивать button в div?

Евгений Вольф, https://codepen.io/raulvodov/pen/WNeKxmw

Стоит ли оборачивать button в div?

Евгений Вольф,
вот мой код:

<button class="more-blogs">Show More</button>

.blog .more-blogs {	
	border: solid 2px #E4E9F0;
	background: #fff;
	color: #212121;
	width: 180px;
	height: 60px;
	text-align: center;
	margin-top: 60px;
	margin-bottom: 150px;
}

Стоит ли оборачивать button в div?

Евгений Вольф, а из-за чего может не работать? Кнопка де по сути это не текстовый элемент?

Стоит ли оборачивать button в div?

Рустам Байназаров, спасибо :)

Стоит ли оборачивать button в div?

Евгений Вольф, Евгений Вольф, попробовал убрать у кнопки display: block; и использовать text-align: center; и не работает.

Стоит ли оборачивать button в div?

Andrey Vasilev, я вообще не понял твоего кода) ни одна из кнопок не отцентрировалась почему-то)

Стоит ли оборачивать button в div?

Спасибо, уверены, что именно родительскому элементу display: block; а не самой button? Я просто попробовал установить display: block; и margin: auto; для самой button и сработало центрирование

Как наиболее удобно рассчитывать и в каких единицах background-position?

ага спасибо большое