#html #css #z-index
#HTML #css #z-индекс
Вопрос:
Сейчас я борюсь примерно 2-3 часа, чтобы получить «скрытую навигацию» над divs. похоже, z-index работает не так, как должно быть.
Поскольку я не могу связать JSFiddle, вот весь код, с которым я борюсь. (были бы признательны за советы, каков здесь общий метод совместного использования всего кода.)
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Barlow Condensed', sans-serif;
overflow: hidden;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.content {
display: flex;
flex-direction: row-reverse;
}
.content-left {
margin-left: 10rem;
margin-top: 5rem;
}
.content-right {
margin-left: 10rem;
margin-top: 5rem;
display: flex;
flex-direction: column;
align-items: center;
}
/* NAVIGATION */
.navigation {
display: flex;
justify-content: space-between;
margin: 5rem 0rem 5rem 10rem;
}
ul {
display: flex;
list-style-type: none;
text-transform: uppercase;
color: hsl(230, 29%, 20%);
font-weight: 700;
margin-right: 15rem;
}
li {
cursor: pointer;
letter-spacing: 2px;
margin: 0rem 1.5rem;
}
.login {
color: hsl(230, 11%, 40%);
opacity: 0.8;
}
#hamburger {
display: none;
}
/* LEFT SIDE*/
.new {
background-color: hsl(230, 29%, 20%);
padding: 2px 10px;
font-weight: bold;
color: white;
text-transform: uppercase;
border-radius: 20px;
}
.mono {
margin-left: 5px;
color: hsl(231, 7%, 65%);
text-transform: uppercase;
letter-spacing: 3px;
}
h1 {
text-transform: uppercase;
color: hsl(230, 29%, 20%);
font-size: 4rem;
font-weight: 700;
margin: 1.5rem 0rem;
}
.planning {
font-size: 1.25rem;
font-weight: 400;
color: hsl(230, 11%, 40%);
width: 50%;
}
button {
background-color: hsl(0, 100%, 68%);
color: white;
text-transform: uppercase;
font-weight: 700;
font-size: 1rem;
padding: 10px 25px;
border-radius: 5px;
outline-style: none;
border: none;
margin-top: 5rem;
margin-right: 0.7rem;
cursor: pointer;
}
/* RIGHT SIDE */
.content-right img {
position: relative;
right: -100px;
}
.rectangle {
position: absolute;
width: 50%;
height: 80%;
top: -230px;
right: -50px;
background: #edf2f6;
border-radius: 31px;
z-index: -1;
}
/* HIDDEN NAV */
#hidden-nav {
position: absolute;
margin: 1rem;
box-shadow: 14px 8px 38px 12px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 90%;
padding: 1rem;
top: 100px;
z-index: 99;
opacity: 1;
}
#hidden-nav hr {
width: 100%;
opacity: 0.5;
}
#hidden-nav ul {
display: flex;
flex-direction: column;
text-align: center;
margin-right: 0rem;
width: 100%;
}
#hidden-nav li {
padding: 1rem 2rem;
}
#hidden-nav .login {
margin-top: 1rem;
}
@media (max-width: 500px) {
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
margin: 3rem 2rem 0rem 2rem;
}
nav {
display: none;
}
#hamburger {
display: block;
cursor: pointer;
}
.content {
display: flex;
flex-direction: column;
}
.content-right {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 1rem;
margin-left: 1rem;
height: 50%;
}
.content-right img {
height: 65%;
}
.content-left {
margin-left: 2rem;
margin-right: 2rem;
margin-top: 0rem;
}
h1 {
font-size: 2.5rem;
}
.mono {
font-size: 0.8rem;
}
button {
font-size: 0.8rem;
margin-top: 2rem;
padding: 10px 20px;
}
.planning {
width: 80%;
}
.rectangle {
top: -150px;
right: -50px;
}
} <link href="https://fonts.googleapis.com/css2?family=Barlow Condensed:wght@400;700amp;display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<ul id="hidden-nav" class="animate__animated animate__fadeIn">
<li>Product (hid)</li>
<li>Features (hid)</li>
<li>Pricing (hid)</li>
<hr>
<li class="login">Login (hidden)</li>
</ul>
<div class="navigation">
<img src="./images/logo.svg" alt="" id="logo">
<img src="./images/icon-hamburger.svg" alt="" id="hamburger">
<nav>
<ul>
<li>Product</li>
<li>Features</li>
<li>Pricing</li>
<li><i class="fas fa-circle fa-sm login"></i></li>
<li class="login">Login</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="rectangle">
</div>
<div class="content">
<div class="content-right">
<img src="./images/illustration-devices.svg" alt="" id="devices">
</div>
<div class="content-left">
<span class="new">New</span>
<span class="mono">Monograph Dashboard</span>
<h1>Powerful insights into your team</h1>
<p class="planning">Project planning and time tracking for agile teams</p>
<button>Schedule a demo</button>
<span class="mono">to see a preview</span>
</div>
</div>
</div> Я думаю, вы можете увидеть проблему.
Обычно оно отображается при нажатии на меню гамбургера, я просто удалил display: none; из меню.
Комментарии:
1. Попробуйте создать .rectangle z-index:0 вместо z-index:-1; Это работает в порядке укладки, поэтому, даже если вы сделаете это z-index: 1 и для верхнего элемента z:index: 2. Я много раз обнаруживал, что отрицательный z-индекс очень глючит.
2. Что вы имеете в виду над divs? Можете ли вы описать еще что-нибудь?
3. Я смотрю на ваш код, НО я не понимаю, чего вы хотите?
4. Как я вижу, ваш скрытый div уже имеет более высокий z-индекс, чем остальная часть страницы, когда я запускаю ваш фрагмент кода. Так что … для меня это выглядит как ситуация без повторения. Добавьте зеленый цвет фона или что-то очевидное для вашего скрытого div, чтобы видеть.
5. Похоже на какую-то мобильную навигацию? Вы пробовали добавлять
background-colorв#hidden-nav? не толькоbox-shadow, возможно, это просто иллюзия, что оно все еще находится под другими элементами
Ответ №1:
Решена проблема путем добавления цвета фона к #hidden-nav. По какой-то причине, с унаследованным цветом фона, навигация становится прозрачной.
Ответ №2:
решение заключается в добавлении стиля #hidden-nav { background: #fff; }
и как поделиться целым кодом:
- выберите код в текстовом редакторе <>
- поделитесь ссылками на стиль и скрипт в качестве обычного примера тега html:
Запишите их в любом месте внутри html-блока
codepen похож на сайт jsfiddle https://www.youtube.com/watch?v=vb9uYBtqmeM