HTML, CSS - Меню не во всю страницу, обрывается из-за Div, как сделать так чтобы Меню был поверх всех Div контейнеров?

Question

HTML, CSS - Меню не во всю страницу, обрывается из-за Div, как сделать так чтобы Меню был поверх всех Div контейнеров?

Чингис Кун Ученик (99), на голосовании 6 месяцев назад

Есть код на html, css и js. Проблема заключается в том что "Меню" слева не распространяется во весь экран или body, "Меню обрывается".

 * { 
 margin: 0; 
 padding: 0; 
 box-sizing: border-box; 
}
:root { 
 --index: calc(1vw + 1vh); 
 --color-header: #f4efec; 
 --color-text: #cdc6c3; 
 --gallery-gap: calc(var(--index) * 10);
}
.content, .hero, .main-header, .gallery > * { 
 will-change: transform; 
}
.hero { 
 width: calc(var(--index) * 36); 
 position: absolute; 
 left: 37vw; 
 top: 8vh; 
 z-index: -1; 
}
.container { 
 padding: 0 7vw; 
} 
.gallery { 
 display: flex; 
 padding: calc(var(--index) * 8) 0; 
} 
.gallery > * { 
 flex: 1; 
 display: flex; 
 align-items: center; 
 flex-direction: column; 
} 
.gallery_item { 
 max-width: calc(var(--index) * 25); 
 margin-bottom: var(--gallery-gap); 
 max-height: 180vh; 
 border-radius: 8px; 
} 
.gallery__left { 
 margin-top: calc(var(--gallery-gap) * 1.75); 
 } 
.gallery__right .gallery_item { 
 margin: 0; 
 margin-top: var(--gallery-gap); 
} 
body { 
 font-family: Arial, sans-serif; 
 line-height: 1.6; 
 background: url(../img/bg.jpg); 
 background-size: 50px; 
 color: #fafafa; 
 font-family: raleway-c; 
 overflow-x: hidden; 
}
header { 
 background-color: #333; 
 color: #fff; 
 padding: 1rem; 
 text-align: center; 
} 
 
header nav ul { 
 list-style: none; 
} 
 
header nav ul li { 
 display: inline; 
 margin: 0 10px; 
} 
 
main { 
 padding: 2rem; 
} 
 
section { 
 margin-bottom: 2rem; 
} 
 
footer { 
 background-color: #333; 
 color: #fff; 
 text-align: center; 
 padding: 1rem; 
} 
 
 
a { 
 color: #007bff; 
 text-decoration: none; 
 transition: color 0.3s ease; 
} 
 
a:hover { 
 color: #0044cc; 
} 
 
 
.title h1{ 
 font-size: 40px; 
 margin-bottom: 50px; 
 color: #fcfffc; 
} 
 
.title span{ 
 color: #f5b7c7; 
} 
 
.list__menu a{ 
 font-family: outfit-c; 
 font-size: 24px; 
 color: #fcfffc; 
 border-left: 2px solid #f5b7c7; 
 padding-left: 5px; 
 transition: all 0.2s ease; 
} 
 
.list__menu a:hover{ 
 border-left: 2px solid #f5b7c7; 
 padding-left: 10px; 
 transition: all 0.2s ease; 
} 
 
.list__menu li{ 
 margin: 20px 0; 
} 
 
.menu { 
 padding: 25vh 50px; 
 position: fixed; 
 background: rgba(20, 20, 20, 0.5); 
 height: 100vh; 
 backdrop-filter: blur(16px); 
 border-right: 7px solid #fcfffc; 
 left: -211px; 
 transition: all 0.2s ease; 
} 
 
.menu:hover{ 
 left: 0; 
 transition: all 0.2s ease; 
}

 const menu = document.querySelector('#menu'); 
const open__menu = document.querySelector('#open__menu'); 
 
menu.addEventListener('click', () => { 
 open__menu.classList.toggle('disp'); 
})

Дополнен 7 месяцев назад

А и ещё есть проблема отступа от header контейнером

<div class="portfolio">Основной контент </div>

Дополнен 7 месяцев назад

Answer 1

Вася Пупкин Мудрец (14943) 7 месяцев назад

z-index: 1000000000 или сколько угодно. это нужно в стилях для класса .menu написать

Чингис КунУченик (99) 7 месяцев назад

А это не испортит все остальное?

Чингис Кун Ученик (99) Чингис Кун, подумал что где-то поправить надо.

Чингис КунУченик (99) 7 месяцев назад

Аааа то есть этот код добавить в класс menu в css?

Чингис КунУченик (99) 7 месяцев назад

не получилось(

 .menu { 
	padding: 25vh 50px; 
	position: fixed; 
	background: rgba(20, 20, 20, 0.5); 
	height: 100vh; 
	backdrop-filter: blur(16px); 
	border-right: 7px solid #fcfffc; 
	left: -211px; 
	transition: all 0.2s ease; 
	z-index: 1000000; 
}

Вася Пупкин Мудрец (14943) Чингис Кун, так ширину то добавить нужно, чтобы растягивалось. z-index организует порядок отрисовки и чем больше значение, тем выше находится элемент

Чингис КунУченик (99) 7 месяцев назад

или это у самого класса menu?

Answer 2

компоновку отработай, а потом уже заполняй контейнеры менюшками, и никаких проблем с ними не будет вообще

Здесь посмотри;
https://bulletproof-password.web.app/grid-layout-001.html