как заставить работать z-index, он отказывается играть в мяч - PullRequest
Новая
       4

как заставить работать z-index, он отказывается играть в мяч

0 голосов
/ 12 мая 2019

Мне нужно, чтобы при наведении курсора на навигационную панель раскрывающееся меню находилось над / поверх основного содержимого, однако в тот момент, когда оно выпадало, оно опускало основное изображениеи не сидеть на вершине, как я ожидаю, что свойство z-index будет делать.

Я установил div nav в относительный, а div основного раздела - в относительный, но все равно без радости!

Кто-нибудь может помочь с этим, пожалуйста?

<div id="top-bar-container">
  <img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
  <i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
  <nav id="nav-bar">
    <ul id="test">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li>
        <a href="#">Services</a>
        <ul>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Branding</a></li>
          <li><a href="#">Consulting</a></li>
          <li><a href="#">SEO</a></li>
        </ul>
      </li>
      <li><a href="#">Our Work</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</div>

<div id="main-section">
  <img id="main-img" src="img/main-image.png" alt="" />
</div>


#top-bar-container {
  background-color: #ec671c;
  width: 100%;
  height: 75px;
}

#nav-bar {
  width: 75%;
  float: right;
  padding-right: 50px;
  position: relative;
  z-index: 1;
}

ul {
  list-style: none;
  padding: 0;
  float: right;
}

ul li {
  float: left;
  width: 90px;
  list-style: none;
  margin-top: 10px;
  text-align: center;
  padding: 5px;
}

ul li:hover {
  background-color: #ec671c;
  border-radius: 5%;
}

ul li a {
  text-decoration: none;
  color: white;
}

ul li a:hover {
   color: orange;
}

ul li ul {
  line-height: 25px; 
}

ul li ul li {
  display: none;
  font-size: 13px;
}

ul li ul li a {
  color: white;
}

ul li:hover ul li {
  display: block;
  padding: 0px;
}

#hamburger-icon {
  display: none;
  color: white;
  position: absolute;
  right: 20px;
   top: 20px; 
}

#hamburger-icon:hover {
  color: orange;
}

#main-section {
  width: 100%;
  height: 100vh;
  position: relative;
}

#main-img {
  width: 100%;
  height: 100vh;
}

Ответы [ 2 ]

0 голосов
/ 12 мая 2019 

#top-bar-container {
  background-color: #ec671c;
  width: 100%;
  height: 75px;
}

#nav-bar {
  width: 75%;
  float: right;
  padding-right: 50px;

}

ul {
  list-style: none;
  padding: 0;
  float: right;
  background-color: #ec671c;

}

ul li {
  float: left;
  width: 90px;
  list-style: none;
  margin-top: 10px;
  text-align: center;
  padding: 5px;
  position:relative;
}

ul li:hover {
  background-color: #ec671c;
  border-radius: 5%;
}

ul li a {
  text-decoration: none;
  color: white;
}

ul li a:hover {
   color: orange;
}

ul li ul {
  line-height: 25px; 
}

ul li ul li {
  display: none;
  font-size: 13px;
}

ul li ul li a {
  color: white;
}

ul li:hover ul li {
  display: block;
  padding: 0px;
}

#hamburger-icon {
  display: none;
  color: white;
  position: absolute;
  right: 20px;
   top: 20px; 
}

#hamburger-icon:hover {
  color: orange;
}

#main-section {
  width: 100%;
  height: 100vh;
}

#main-img {
  width: 100%;
  height: 100vh;

}
#top-bar-container >nav >ul > li > ul{
	position:absolute;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>

</style>
</head>
<body>

<div id="top-bar-container">
  <img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
  <i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
  <nav id="nav-bar">
    <ul id="test">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li>
        <a href="#">Services</a>
        <ul>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Branding</a></li>
          <li><a href="#">Consulting</a></li>
          <li><a href="#">SEO</a></li>
        </ul>
      </li>
      <li><a href="#">Our Work</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</div>

<div id="main-section">
  <img id="main-img" src="img" alt="" />
</div>


</body>
</html>

привет Вы можете сделать в разделе ul> li {position :lative} и также вставить второй UL {position: absolute}

0 голосов
/ 12 мая 2019

#main-section опущен, потому что раскрывающееся меню расположено в потоке документа.

Когда оно не находится, у него есть display: none, которое выводит его из DOM.При наведении курсора он переключается на position: block, что ставит его обратно - и он занимает место и выталкивает основное содержимое.

Вы можете проверить это, добавив желаемый конечный результат display: block по умолчанию,и посмотрите, как будет выглядеть документ в развернутом состоянии.

Необходимо применить position: absolute к раскрывающемуся списку, чтобы он не мешал потоку документов.Вы также можете переместить z-index: 1 непосредственно на него, если это содержимое должно быть сверху - или вы можете оставить его на родительском элементе, и оно должно работать так же хорошо.- здесь не проблема с z-индексом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...