1

.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-index

在侧边菜单下的主要内容顶部显示页脚

.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-index:1) 应显示在侧边菜单(z-index:3) 和汉堡包(z-index:4) 下。

如果我将页脚的 z-index 更改为 -1,它会得到所需的结果,但是页脚会出现在主要内容后面......

我想将页脚保留在侧菜单下的主要内容之上。

4

2 回答 2

2

z-index可能很棘手,因为它包含z-index. z-index为任何定位的对象计算A (意思是relativeabsolutefixedsticky)。

因为.header-inneris fixed,它的计算z-index值为 0。现在,因为z-index是相对于 contains z-index,你.inner-footer的 'sz-index相对于 z-index 0,所以任何z-index嵌套的.header-inner都不能放在块的顶部.header-inner除非您将.header-inner'更改为z-index更大的值。

这最终意味着您.inner-footerz-index1 与 0 竞争,因此除非您将竞争更改为大于 1 的值(将其更改为 2),z-index否则它将始终位于顶部。z-index

为了更清楚.hamburger.change.dropdown具有嵌套z-index值,您可以将它们分别更改为21,它们将具有与现在相同的效果。

查看修改后的代码:

.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>

于 2017-12-06T03:11:10.813 回答
0

尝试添加z-index:2到您的.header-inner课程中,看看您是否获得了想要的结果。

于 2017-12-06T03:10:32.113 回答