Как выдвинуть мобильное меню на первый фон

Frontend developer HTML / CSS
1

В общем взялся доделывать сайт за другим человеком, практически всё исправил и переделал, осталась последняя проблема, у меня когда маленький экран и меняется обычное меню на мобильное, мобильное меню отображается ниже чем контент страницы, например есть мобильное меню, а снизу сразу какое то изображение, так вот там где изображение, не видно меню, подскажите пожалуйста что делать в таких ситуациях, как его выдвинуть на первый план?

2

Слышал про z-index? Как раз он и определяет какой элемент будет выше отображатся, он принимает целые значения, и задать его можно вроде только если position: relative absolute fixed. Вот пример в коде:


<div class="block block-1">Блок 1
<div class="block block-2">Блок 2
<div class="block block-3">Блок 3

Вот стили, поиграй с z-index и поймешь как оно работает, а в твоем данном случае тебе нужно просто главному контейнеру меню задать большой z-index, увеличивай до тех пор пока меню не будет на первом плане, успехов в обучении)

body {
    margin: 0;
    padding: 20px;
}

.block {
    padding: 10px;
    text-align: right;
    color: white;
    opacity: 0.8;
}

.block-1 {
    width: 350px;
    height: 350px;
    background-color: #3a78a1;
    position: relative;
    z-index:200;
}

.block-2 {
    position: absolute;
    top: 20px;
    width: 250px;
    height: 250px;
    background-color: #e74c3c;
    z-index:100;
}

.block-3 {
    position: absolute;
    top: 20px;
    width: 150px;
    height: 150px;
    background-color: #27ae60;
}