Z-индекс применяется к нижнему колонтитулу не работает

Question

.wrap {
  background-color: #393939;
  height: inherit;
}


/*-----------------------header---------------------------------------------------------*/

.header-inner {
  background-color: #393939;
  width: 100%;
  height: 70px;
  /* [disabled]display: flex; */
  position: fixed;
  top: 0;
}

.pclogo {
  display: none;
}

.tabletlogo {
  display: none;
}

.line {
  display: none;
}

a .mobilelogo {
  width: 215px;
  height: auto;
  margin-top: 10px;
  display: block;
  margin-right: auto;
  margin-left: auto;
  cursor: pointer;
}


/*doesn't show the navigation bar*/

.navbar {
  display: none
}


/*---------------------hamburger-----------------------*/

.hamburger {
  display: block;
  position: absolute;
  top: 10px;
  right: 3.3%;
  cursor: pointer;
  float: right;
  z-index: 4/*important!!! humburger menu comes on the top of side menu*/
}

.bar1,
.bar2,
.bar3 {
  width: 26px;
  height: 3px;
  /* Original 5px*/
  margin: 8px 0;
  /* Original 6px*/
  transition: 0.6s;
  background-color: white;
  border-radius: 3px;
}


/* Rotate first bar */

.change .bar1 {
  -webkit-transform: translate(0px, 5.5px) rotate(-45deg);
  /*move →0px ↓5.5px(hight of bar/2+margin/2) and lotate ↺45°*/
  transform: translate(0px, 5.5px) rotate(-45deg);
  background-color: rgba(207, 207, 207, 1.00);
}


/* Fade out the second bar */


/*.change .bar2 {
   opacity: 0;
  }*/


/* Rotate last bar */

.change .bar3 {
  -webkit-transform: translate(0px, -5.5px) rotate(45deg);
  transform: translate(0px, -5.5px) rotate(45deg);
  background-color: rgba(207, 207, 207, 1.00);
}


/*---dropdown menu---*/

.dropdown {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 3;
  /*important!!! humburger menu comes on the top of side menu*/
  top: 0;
  right: 0;
  background-color: #393939;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  text-align: center;
}

.dropdown a {
  display: none;
  transition: 0.4s;
}


/*---dropdown menu withdraw---*/

.change.dropdown {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 3;
  top: 0;
  right: 0;
  background-color: rgba(69, 69, 69, 0.90);
  /*Color Transparency of side menu*/
  overflow-x: hidden;
  transition: 0.6s;
  padding: 68px 0 0 0;
  /* control the space above "Home"*/
  text-align: center;
}


/*---dropdown menu effect---*/

.change.dropdown a {
  padding: 10px 5px;
  font-family: 'Kozuka Gothic Pr6N';
  font-size: 18px;
  text-decoration: none;
  color: white;
  display: block;
  transition: 0.3s;
  border-bottom: rgba(163, 161, 161, 0.77);
}

.dropdown a::before {
  -webkit-transition-duration: 0.3s;
  /* Safari */
  transition-duration: 0.3s;
  content: attr(data-hover);
  /*The attr() property inserts a specified attribute's value before or after the selected element(s).*/
}

.dropdown a:hover {
  border-left: 2px solid rgba(255, 255, 255, 0.70);
  border-right: 2px solid rgba(255, 255, 255, 0.70);
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  transform: scale(0.9);
  color: rgba(255, 255, 255, 0.70);
}


/*---------------------hamburger---------------------------*/


/*---------------------------------------------header----------------------------------------------*/


/*----------------------------------------------Main----------------------------------------------*/

.main-inner {
  min-height: 100%;
  height: auto !important;
  /*Cause footer to stick to bottom in IE 6*/
  height: 100%;
  vertical-align: bottom;
  padding-top: 70px;
  /*-------important!!!!!-------*/
}

.slideimage-container img {
  height: inherit;
  width: 100%;
  /* [disabled]padding-top: 90px; */
  /* [disabled]padding-bottom: 70px; */
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}


/*----------update list-----------*/

.update-container {
  padding: 5px;
  width: 100%;
}

.update-container table {
  margin: 0 auto;
}

.update-container table tr {
  color: white;
  font-size: 10px;
  font-family: 'Kozuka Gothic Pr6N';
  text-align: left;
  font-weight: thin;
  padding: 5px 10px;
  vertical-align: top;
}


/*----------------------------------------------Main----------------------------------------------*/


/*----------------------------------------------Footer----------------------------------------------*/

.footer-inner {
  width: 100%;
  /* [disabled]padding-top: 15px; */
  /*space between Main and Footer*/
  height: 28px;
  bottom: 0;
  position: fixed;
  background-color: #393939;
  z-index: 1;
}

.line-footer {
  display: none;
  /* [disabled]width: 100%; */
  /* [disabled]height: 1px; */
  /* [disabled]border-bottom: 1px solid white; */
  /* [disabled]margin-bottom: 15px; */
  /* [disabled]position: absolute; */
}

.copyright {
  width: 100%;
  float: right;
  font-family: 'Kozuka Gothic Pr6N';
  color: #ffffff;
  font-size: 0.5px;
  bottom: 0px;
  padding: 10px 5px 0 0;
  /* [disabled]margin-right: 5px; */
  text-align: right;
  /* [disabled]position: absolute; */
}


/*----------------------------------------------Footer----------------------------------------------*/

<body oncontextmenu="return false">

  <div class="wrap">
    <!-- to define the maximum width -->

    <!-- Header -->
    <header>
      <div class="container">
        <div class="header-inner">
          <!-- Header Flex (logo and navbar) -->





          <!-- Hamburger -->

          <div class="hamburger" onclick="myFunction(this)">
            <div class="bar1"></div>
            <!-- <div class="bar2"></div> -->
            <div class="bar3"></div>
          </div>



          <div id="myDIV" class="dropdown" role="navigation">
            <a href="index.html">Home</a>
            <a href="News/index.html">News</a>
            <a href="Concept/index.html">Concept</a>
            <a href="Profile/index.html">Profile</a>
            <a href="Works/index.html">Works</a>
            <a href="Contact/index.html">Contact</a>
          </div>


          <!-- x is used to change hamburger menu, y is used to change side menu width -->
          <script>
            function myFunction(x) {
              x.classList.toggle("change");

              var y = document.getElementById("myDIV");
              y.classList.toggle("change");
            }
          </script>


          <!-- Hamburger -->




          <ul class="navbar" role="navigation">
            <li><a href="index.html">Home</a></li>
            <li><a href="News/index.html">News</a></li>
            <li><a href="Concept/index.html">Concept</a></li>
            <li><a href="Profile/index.html">Profile</a></li>
            <li><a href="Works/index.html">Works</a></li>
            <li><a href="Contact/index.html">Contact</a></li>
          </ul>

          <div class="line"></div>
        </div>
      </div>





    </header>



    <!-- Main Content -->
    <main>
      <div class="container">
        <div class="main-inner">
        </div>
      </div>




      <div class="container">
        <div class="update-container">
        </div>
      </div>



    </main>
    <!-- End Main Content -->



    <!-- Footer -->
    <footer>
      <div class="container">
        <div class="footer-inner">
          <div class="line-footer"></div>
          <div class="copyright">
            Copyright © 小野寺康都市設計事務所. All rights reserved.
          </div>
        </div>
      </div>
    </footer>
    <!-- End Footer -->
  </div>
</body>

Z-индекс

показать нижний колонтитул поверх основного содержимого под боковым меню

.dropdown `{height: 100%;width: 0;position: fixed;z-index: 3;/*important!!! humburger menu comes on the top of side menu*/top: 0;right: 0;background-color: #393939;overflow-x: hidden;transition: 0.5s;padding-top: 60px;text-align: center;}`

.hamburger `{display: block;position: absolute;top: 10px;right: 3.3%;cursor: pointer;float: right;z-index: 4/*important!!! humburger menu comes on the top of side menu*/}`


.footer-inner `{width: 100%;/* [disabled]padding-top: 15px; *//*space between Main and Footer*/height: 28px;bottom: 0;position: fixed;background-color: #393939;z-index: 1;}`

Нижний колонтитул (z-индекс:1) должен отображаться под боковым меню (z-индекс:3) и гамбургер (z-индекс:4).

Если я изменил z-index нижнего колонтитула на -1, он получит желаемый результат, но тогда нижний колонтитул будет отставать от основного содержимого...

Я хочу держать нижний колонтитул поверх основного содержимого под боковым меню.

Answer 1

z-index может быть сложнее, потому что это относительно содержания z-index, z-index рассчитывается для любого объекта, который расположен (то есть relative,absolute, fixed, или же sticky).

Так как .header-innerявляетсяfixed, он рассчитал z-index 0. Теперь, потому что z-indexотносительно содержания z-index, ваш .inner-footer "s z-indexотносительно Z-индекса 0, так что любой z-indexэто вложено в.header-innerне сможет быть размещен на вершине блока, который находится на вершине .header-inner если вы не измените .header-inner "s z-index к большей стоимости.

Это в конечном итоге означает, что ваш .inner-footer"sz-indexиз 1 конкурирует с z-index0, поэтому он всегда будет на вершине, если вы не измените конкурирующую z-index до значения больше 1 (измените его на 2).

Чтобы было понятнее, что.hamburgerа также.change.dropdownвложили z-index значения, вы можете изменить их на 2 а также 1 соответственно и будут иметь тот же эффект, что и сейчас.

Смотрите модифицированный код:

.wrap {
  background-color: #393939;
  height: inherit;
}


/*-----------------------header---------------------------------------------------------*/

.header-inner {
  background-color: #393939;
  width: 100%;
  height: 70px;
  /* [disabled]display: flex; */
  position: fixed;
  z-index: 2; /* to place this on top of footer */
  top: 0;
}

.pclogo {
  display: none;
}

.tabletlogo {
  display: none;
}

.line {
  display: none;
}

a .mobilelogo {
  width: 215px;
  height: auto;
  margin-top: 10px;
  display: block;
  margin-right: auto;
  margin-left: auto;
  cursor: pointer;
}


/*doesn't show the navigation bar*/

.navbar {
  display: none
}


/*---------------------hamburger-----------------------*/

.hamburger {
  display: block;
  position: absolute;
  top: 10px;
  right: 3.3%;
  cursor: pointer;
  float: right;
  z-index: 2 /*important!!! humburger menu comes on the top of side menu*/
}

.bar1,
.bar2,
.bar3 {
  width: 26px;
  height: 3px;
  /* Original 5px*/
  margin: 8px 0;
  /* Original 6px*/
  transition: 0.6s;
  background-color: white;
  border-radius: 3px;
}


/* Rotate first bar */

.change .bar1 {
  -webkit-transform: translate(0px, 5.5px) rotate(-45deg);
  /*move →0px ↓5.5px(hight of bar/2+margin/2) and lotate ↺45°*/
  transform: translate(0px, 5.5px) rotate(-45deg);
  background-color: rgba(207, 207, 207, 1.00);
}


/* Fade out the second bar */


/*.change .bar2 {
   opacity: 0;
  }*/


/* Rotate last bar */

.change .bar3 {
  -webkit-transform: translate(0px, -5.5px) rotate(45deg);
  transform: translate(0px, -5.5px) rotate(45deg);
  background-color: rgba(207, 207, 207, 1.00);
}


/*---dropdown menu---*/

.dropdown {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 3;
  /*important!!! humburger menu comes on the top of side menu*/
  top: 0;
  right: 0;
  background-color: #393939;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  text-align: center;
}

.dropdown a {
  display: none;
  transition: 0.4s;
}


/*---dropdown menu withdraw---*/

.change.dropdown {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1; /* below hamburger */
  top: 0;
  right: 0;
  background-color: rgba(69, 69, 69, 0.90);
  /*Color Transparency of side menu*/
  overflow-x: hidden;
  transition: 0.6s;
  padding: 68px 0 0 0;
  /* control the space above "Home"*/
  text-align: center;
}


/*---dropdown menu effect---*/

.change.dropdown a {
  padding: 10px 5px;
  font-family: 'Kozuka Gothic Pr6N';
  font-size: 18px;
  text-decoration: none;
  color: white;
  display: block;
  transition: 0.3s;
  border-bottom: rgba(163, 161, 161, 0.77);
}

.dropdown a::before {
  -webkit-transition-duration: 0.3s;
  /* Safari */
  transition-duration: 0.3s;
  content: attr(data-hover);
  /*The attr() property inserts a specified attribute's value before or after the selected element(s).*/
}

.dropdown a:hover {
  border-left: 2px solid rgba(255, 255, 255, 0.70);
  border-right: 2px solid rgba(255, 255, 255, 0.70);
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  transform: scale(0.9);
  color: rgba(255, 255, 255, 0.70);
}


/*---------------------hamburger---------------------------*/


/*---------------------------------------------header----------------------------------------------*/


/*----------------------------------------------Main----------------------------------------------*/

.main-inner {
  min-height: 100%;
  height: auto !important;
  /*Cause footer to stick to bottom in IE 6*/
  height: 100%;
  vertical-align: bottom;
  padding-top: 70px;
  /*-------important!!!!!-------*/
}

.slideimage-container img {
  height: inherit;
  width: 100%;
  /* [disabled]padding-top: 90px; */
  /* [disabled]padding-bottom: 70px; */
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}


/*----------update list-----------*/

.update-container {
  padding: 5px;
  width: 100%;
}

.update-container table {
  margin: 0 auto;
}

.update-container table tr {
  color: white;
  font-size: 10px;
  font-family: 'Kozuka Gothic Pr6N';
  text-align: left;
  font-weight: thin;
  padding: 5px 10px;
  vertical-align: top;
}


/*----------------------------------------------Main----------------------------------------------*/


/*----------------------------------------------Footer----------------------------------------------*/

.footer-inner {
  width: 100%;
  /* [disabled]padding-top: 15px; */
  /*space between Main and Footer*/
  height: 28px;
  bottom: 0;
  position: fixed;
  background-color: #393939;
  z-index: 1;
}

.line-footer {
  display: none;
  /* [disabled]width: 100%; */
  /* [disabled]height: 1px; */
  /* [disabled]border-bottom: 1px solid white; */
  /* [disabled]margin-bottom: 15px; */
  /* [disabled]position: absolute; */
}

.copyright {
  width: 100%;
  float: right;
  font-family: 'Kozuka Gothic Pr6N';
  color: #ffffff;
  font-size: 0.5px;
  bottom: 0px;
  padding: 10px 5px 0 0;
  /* [disabled]margin-right: 5px; */
  text-align: right;
  /* [disabled]position: absolute; */
}

<body oncontextmenu="return false">

  <div class="wrap">
    <!-- to define the maximum width -->

    <!-- Header -->
    <header>
      <div class="container">
        <div class="header-inner">
          <!-- Header Flex (logo and navbar) -->





          <!-- Hamburger -->

          <div class="hamburger" onclick="myFunction(this)">
            <div class="bar1"></div>
            <!-- <div class="bar2"></div> -->
            <div class="bar3"></div>
          </div>



          <div id="myDIV" class="dropdown" role="navigation">
            <a href="index.html">Home</a>
            <a href="News/index.html">News</a>
            <a href="Concept/index.html">Concept</a>
            <a href="Profile/index.html">Profile</a>
            <a href="Works/index.html">Works</a>
            <a href="Contact/index.html">Contact</a>
          </div>


          <!-- x is used to change hamburger menu, y is used to change side menu width -->
          <script>
            function myFunction(x) {
              x.classList.toggle("change");

              var y = document.getElementById("myDIV");
              y.classList.toggle("change");
            }
          </script>


          <!-- Hamburger -->




          <ul class="navbar" role="navigation">
            <li><a href="index.html">Home</a></li>
            <li><a href="News/index.html">News</a></li>
            <li><a href="Concept/index.html">Concept</a></li>
            <li><a href="Profile/index.html">Profile</a></li>
            <li><a href="Works/index.html">Works</a></li>
            <li><a href="Contact/index.html">Contact</a></li>
          </ul>

          <div class="line"></div>
        </div>
      </div>





    </header>



    <!-- Main Content -->
    <main>
      <div class="container">
        <div class="main-inner">
        </div>
      </div>




      <div class="container">
        <div class="update-container">
        </div>
      </div>



    </main>
    <!-- End Main Content -->



    <!-- Footer -->
    <footer>
      <div class="container">
        <div class="footer-inner">
          <div class="line-footer"></div>
          <div class="copyright">
            Copyright © 小野寺康都市設計事務所. All rights reserved.
          </div>
        </div>
      </div>
    </footer>
    <!-- End Footer -->
  </div>
</body>

Answer 2

Попробуйте добавить z-index:2 на ваш .header-inner класс и посмотреть, если вы получите желаемый результат.