CSS position: fixed не показывает <nav>после его размещения в другом месте в коде html - PullRequest
Новая
       5

CSS position: fixed не показывает <nav>после его размещения в другом месте в коде html

0 голосов
/ 21 марта 2020

При попытке создать адаптивное меню для мобильной версии я столкнулся с поведением, которое я не могу понять, и обращаюсь к вам за советом.

Я прикрепил ссылки на два кода, которые в значительной степени совпадают. Единственная разница заключается в положении навигационной панели, которая открывается в «Полном экране» (width: 100vw; height:100vh;), когда пользователь нажимает кнопку «Открыть меню».

В первой версии, когда пользователь нажимает кнопку «» Кнопка «Открыть меню», меню открывается четко, как вы можете видеть. Изменение, которое я сделал во второй версии, заключалось в том, чтобы просто взять всю навигационную часть и поместить ее в основной атрибут в коде HTML.

Я не понимаю следующее: почему это важно если навигация помещена внутри или где-нибудь еще на странице в этом отношении? Когда пользователь нажимает кнопку «Открыть меню», #overley css имеет атрибуты position: fixed и top: 0px;. Это означает, что он должен быть зафиксирован в верхней части страницы, но во второй версии, при нажатии кнопки меню - ничего не происходит и окно, которое должно отображаться, не отображается. Я даже поместил z-index, чтобы убедиться, что он не «скрыт» или что-то в этом роде.

Насколько я понимаю, позиция: фиксированная с top: 0px должна быть сверху, а это не так случиться на второй версии по причине, которую я действительно не понимаю, и был бы признателен, узнав, почему это происходит.

Первая версия - работает (меню открывается вверх)

Вторая версия - не работает (при нажатии кнопки меню ничего не происходит)

Код рабочей версии: 

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style>
body {
  background: #87cc77;
  margin: 0;
  font-family: arial;
  width: 100vw;
  height: 100vh;
  animation: bugfix infinite 1s;
  -webkit-animation: bugfix infinite 1s;
}

@keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
#overlay-button {
  position: absolute;
  right: 2em;
  top: 3em;
  padding: 26px 11px;
  z-index: 5;
  cursor: pointer;
  user-select: none;
}
#overlay-button span {
  height: 4px;
  width: 35px;
  border-radius: 2px;
  background-color: white;
  position: relative;
  display: block;
  transition: all .2s ease-in-out;
}
#overlay-button span:before {
  top: -10px;
  visibility: visible;
}
#overlay-button span:after {
  top: 10px;
}
#overlay-button span:before, #overlay-button span:after {
  height: 4px;
  width: 35px;
  border-radius: 2px;
  background-color: white;
  position: absolute;
  content: "";
  transition: all .2s ease-in-out;
}
#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
  background: #333332;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]:checked ~ #overlay {
  visibility: visible;
}

input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
  background: transparent;
}
input[type=checkbox]:checked ~ #overlay-button span:before {
  transform: rotate(45deg) translate(7px, 7px);
  opacity: 1;
}
input[type=checkbox]:checked ~ #overlay-button span:after {
  transform: rotate(-45deg) translate(7px, -7px);
}

#overlay {
  height: 100vh;
  width: 100vw;
  background: #ec6451;
  z-index: 2;
  visibility: hidden;
  position: fixed;
  top:0px;
}
#overlay.active {
  visibility: visible;
}
#overlay ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  height: 100vh;
  padding-left: 0;
  list-style-type: none;
}
#overlay ul li {
  padding: 1em;
}
#overlay ul li a {
  color: white;
  text-decoration: none;
  font-size: 1.5em;
}
#overlay ul li a:hover {
  color: #333332;
}
</style>
</head>
<body>
<input type="checkbox" id="overlay-input" />
<label for="overlay-input" id="overlay-button"><span></span></label>
<nav id="overlay">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
<main>
<div style="width:100px; height:200px; overflow:hidden">
Text
</div>
</main>
</html>

Код второй версии (версия, в которой меню не открывается): 

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style>
body {
  background: #87cc77;
  margin: 0;
  font-family: arial;
  width: 100vw;
  height: 100vh;
  animation: bugfix infinite 1s;
  -webkit-animation: bugfix infinite 1s;
}

@keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
#overlay-button {
  position: absolute;
  right: 2em;
  top: 3em;
  padding: 26px 11px;
  z-index: 5;
  cursor: pointer;
  user-select: none;
}
#overlay-button span {
  height: 4px;
  width: 35px;
  border-radius: 2px;
  background-color: white;
  position: relative;
  display: block;
  transition: all .2s ease-in-out;
}
#overlay-button span:before {
  top: -10px;
  visibility: visible;
}
#overlay-button span:after {
  top: 10px;
}
#overlay-button span:before, #overlay-button span:after {
  height: 4px;
  width: 35px;
  border-radius: 2px;
  background-color: white;
  position: absolute;
  content: "";
  transition: all .2s ease-in-out;
}
#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
  background: #333332;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]:checked ~ #overlay {
  visibility: visible;
}

input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
  background: transparent;
}
input[type=checkbox]:checked ~ #overlay-button span:before {
  transform: rotate(45deg) translate(7px, 7px);
  opacity: 1;
}
input[type=checkbox]:checked ~ #overlay-button span:after {
  transform: rotate(-45deg) translate(7px, -7px);
}

#overlay {
  height: 100vh;
  width: 100vw;
  background: #ec6451;
  z-index: 2;
  visibility: hidden;
  position: fixed;
  top:0px;
}
#overlay.active {
  visibility: visible;
}
#overlay ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  height: 100vh;
  padding-left: 0;
  list-style-type: none;
}
#overlay ul li {
  padding: 1em;
}
#overlay ul li a {
  color: white;
  text-decoration: none;
  font-size: 1.5em;
}
#overlay ul li a:hover {
  color: #333332;
}
</style>
</head>
<body>
<input type="checkbox" id="overlay-input" />
<label for="overlay-input" id="overlay-button"><span></span></label>
</body>
<main>
<div style="width:100px; height:200px; overflow:hidden">
Text
</div>
<nav id="overlay">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>  
</main>
</html>

1 Ответ

1 голос
/ 21 марта 2020

о, о, о, боже ... я давно не видел такой грязный HTML код, на оба примера кода трудно взглянуть. Я не знаю, как объяснить, так как я не знаю, как CSS отреагирует, столкнувшись с плохо написанной структурой HTML. Всегда помните, чтобы убедиться, что ваши элементы вложены правильно!

Я исправил код для вас, но серьезно ... Я действительно думаю, что следует узнать немного больше о правильном написании basi c HTML, перед тем, как попробовать что-нибудь необычное, например, интерактивную кнопку или (как вопрос), отзывчивый дизайн. 

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style>
body {
  background: #87cc77;
  margin: 0;
  font-family: arial;
  width: 100vw;
  height: 100vh;
  animation: bugfix infinite 1s;
  -webkit-animation: bugfix infinite 1s;
}

@keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
#overlay-button {
  position: absolute;
  right: 2em;
  top: 3em;
  padding: 26px 11px;
  z-index: 5;
  cursor: pointer;
  user-select: none;
}
#overlay-button span {
  height: 4px;
  width: 35px;
  border-radius: 2px;
  background-color: white;
  position: relative;
  display: block;
  transition: all .2s ease-in-out;
}
#overlay-button span:before {
  top: -10px;
  visibility: visible;
}
#overlay-button span:after {
  top: 10px;
}
#overlay-button span:before, #overlay-button span:after {
  height: 4px;
  width: 35px;
  border-radius: 2px;
  background-color: white;
  position: absolute;
  content: "";
  transition: all .2s ease-in-out;
}
#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
  background: #333332;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]:checked ~ #overlay {
  visibility: visible;
}

input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
  background: transparent;
}
input[type=checkbox]:checked ~ #overlay-button span:before {
  transform: rotate(45deg) translate(7px, 7px);
  opacity: 1;
}
input[type=checkbox]:checked ~ #overlay-button span:after {
  transform: rotate(-45deg) translate(7px, -7px);
}

#overlay {
  height: 100vh;
  width: 100vw;
  background: #ec6451;
  z-index: 2;
  visibility: hidden;
  position: fixed;
  top:0px;
}
#overlay.active {
  visibility: visible;
}
#overlay ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  height: 100vh;
  padding-left: 0;
  list-style-type: none;
}
#overlay ul li {
  padding: 1em;
}
#overlay ul li a {
  color: white;
  text-decoration: none;
  font-size: 1.5em;
}
#overlay ul li a:hover {
  color: #333332;
}

input[type=checkbox]:checked + #overlay-button + main > #overlay {
  visibility: visible;
}
</style>
</head>
<body>

<input type="checkbox" id="overlay-input" />
<label for="overlay-input" id="overlay-button"><span></span></label>

<main>
    <div style="width:100px; height:200px; overflow:hidden">Text</div>
    <nav id="overlay">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>  
</main>

</body>
</html>
...