z-index不是绝对的

时间：2017-01-20 09:35:49

标签： html css

enter image description here

我希望新来的孩子总是排在最前面（z-索引：9999）， 但我不能让它发挥作用。我对绝对和相对的课程感到困惑......我已经尝试了几个小时，仍然无法使其工作......需要帮助。

/* parent menu */

ul.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  /*background: #34495e;*/
  margin: 50px auto;
  width: 800px;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  z-index: 10;
  position: relative;
}
ul.menu li {
  display: block;
  float: left;
  background: #34495e;
  transform: skewX(25deg);
}
.menu > li > a {
  transform: skewX(-25deg);
  padding: 1em 2em;
}
.menu a {
  display: block;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  font-family: Arial, Helvetica;
  font-size: 14px;
}
ul.submenu.level_2 {
  position: absolute;
  width: auto;
  left: 0%;
  transform: skewX(-25deg);
  transform-origin: left top;
  padding: 0px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .9);
  z-index: 99999;


}
ul.submenu.level_3 {
  left: 100%;
  top: 0;
  position: absolute;
  width: auto;
  transform-origin: left top;
  padding: 0px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
ul.submenu.level_4 {
  left: 100%;
  top: 0;
  position: absolute;
  width: auto;
  transform-origin: left top;
  padding: 0px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
ul.submenu.level_5 {
  left: 100%;
  top: 0;
  position: absolute;
  width: auto;
  transform-origin: left top;
  padding: 0px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
ul.submenu.level_6 {
  left: 100%;
  top: 0;
  position: absolute;
  width: auto;
  transform-origin: left top;
  padding: 0px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
ul.submenu.level_2.move-menu {
  left: -100%;
}
li.menu-list ul {
  display: none;
}
ul.menu li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}
/* hover effect */

li.menu-list:hover > ul {
  display: block;
  /*position: absolute;*/
  padding: 0px;
}
/* parent menu hover effect*/

li.menu-list:hover {
  background: #ec3939;
}
li.menu-list:hover a {
  transform: skewX(-25deg);
}
/* children menu hover effect*/

li.menu-list:hover li {
  float: none;
  transform: skewX(0deg);
}
li.menu-list:hover li a {
  float: none;
  transform: skewX(0deg);
}
<div class="container hidden-xs">
  <ul class="menu">
    <li>
      <a href="http://sedtag.dev/">Home</a>
    </li>
    <li class="menu-list">
      <a href="category-16-b0-New+Arrivals.html">New Arrivals<b class="caret"></b></a>
      <ul class="submenu level_2">
        <li class="menu-list level_2">
          <a href="category-1526-b0-30+Nov+2015.html">30 Nov 2015</a>
        </li>
        <li class="menu-list level_2">
          <a href="category-1525-b0-28+Nov+2015.html">28 Nov 2015</a>
        </li>
        <li class="menu-list level_2">
          <a href="category-1521-b0-26+Nov+2015.html">26 Nov 2015</a>
        </li>
        <li class="menu-list level_2">
          <a href="category-1510-b0-24+Nov+2015.html">24 Nov 2015</a>
        </li>
      </ul>
    </li>
    <li class="menu-list">
      <a href="category-1533-b0-about+us.html">about us</a>
    </li>
    <li class="menu-list">
      <a href="category-1534-b0-contact.html">contact</a>
    </li>
    <li class="menu-list">
      <a href="category-11-b0-Restock+Items.html">Restock Items<b class="caret"></b></a>
      <ul class="submenu level_2">
        <li class="menu-list level_2">
          <a href="category-1527-b0-30+Nov+2015.html">30 Nov 2015</a>
        </li>
      </ul>
    </li>
    <li class="menu-list">
      <a href="category-5-b0-Ready+Stock.html">Ready Stock<b class="caret"></b></a>
      <ul class="submenu level_2">
        <li class="menu-list level_2">
          <a href="category-1165-b0-Baby.html">Baby<b class="caret"></b></a>
          <ul class="submenu level_3">
            <li class="menu-list level_3">
              <a href="category-1536-b0-baby+child.html">baby child<b class="caret"></b></a>
              <ul class="submenu level_4">
                <li class="menu-list level_4">
                  <a href="category-1537-b0-baby+children.html">baby children<b class="caret"></b></a>
                  <ul class="submenu level_5">
                    <li class="menu-list level_5">
                      <a href="category-1538-b0-baby+children+2.html">baby children 2<b class="caret"></b></a>
                      <ul class="submenu level_6">
                        <li class="menu-list level_6">
                          <a href="category-1539-b0-baby+children+3.html">baby children 3</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li class="menu-list level_4">
                  <a href="category-1543-b0-baby+children+clone.html">baby children clone</a>
                </li>
              </ul>
            </li>
            <li class="menu-list level_3">
              <a href="category-1542-b0-baby+child+2.html">baby child 2</a>
            </li>
          </ul>
        </li>
        <li class="menu-list level_2">
          <a href="category-960-b0-Jubah.html">Jubah<b class="caret"></b></a>
          <ul class="submenu level_3">
            <li class="menu-list level_3">
              <a href="category-1541-b0-Jubah+child.html">Jubah child</a>
            </li>
          </ul>
        </li>
        <li class="menu-list level_2">
          <a href="category-306-b0-Cheong+Sam.html">Cheong Sam</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

2 个答案:

答案 0 :(得分：3)

z-index仅适用于首先处于同一级别的定位元素 - 因此在这种情况下，您需要使悬停的li比非悬停的li更高的z-index：

/* parent menu */

ul.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  /*background: #34495e;*/
  margin: 50px auto;
  width: 800px;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  z-index: 10;
  position: relative;
}
ul.menu li {
  display: block;
  float: left;
  background: #34495e;
  transform: skewX(25deg);
}
.menu > li > a {
  transform: skewX(-25deg);
  padding: 1em 2em;
}
.menu a {
  display: block;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  font-family: Arial, Helvetica;
  font-size: 14px;
}
ul.submenu.level_2 {
  position: absolute;
  width: auto;
  left: 0%;
  transform: skewX(-25deg);
  transform-origin: left top;
  padding: 0px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
ul.submenu.level_3 {
  left: 100%;
  top: 0;
  position: absolute;
  width: auto;
  transform-origin: left top;
  padding: 0px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
ul.submenu.level_4 {
  left: 100%;
  top: 0;
  position: absolute;
  width: auto;
  transform-origin: left top;
  padding: 0px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
ul.submenu.level_5 {
  left: 100%;
  top: 0;
  position: absolute;
  width: auto;
  transform-origin: left top;
  padding: 0px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
ul.submenu.level_6 {
  left: 100%;
  top: 0;
  position: absolute;
  width: auto;
  transform-origin: left top;
  padding: 0px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
ul.submenu.level_2.move-menu {
  left: -100%;
}
li.menu-list ul {
  display: none;
}
ul.menu li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}
/* hover effect */

li.menu-list:hover > ul {
  display: block;
  /*position: absolute;*/
  padding: 0px;
}
li.menu-list {
  position: relative;
  z-index: 1;
}
/* parent menu hover effect*/

li.menu-list:hover {
  background: #ec3939;
  z-index: 2;
}
li.menu-list:hover a {
  transform: skewX(-25deg);
}
/* children menu hover effect*/

li.menu-list:hover li {
  float: none;
  transform: skewX(0deg);
}
li.menu-list:hover li a {
  float: none;
  transform: skewX(0deg);
}
<div class="container hidden-xs">
  <ul class="menu">
    <li><a href="http://sedtag.dev/">Home</a>
    </li>

    <li class="menu-list">
      <a href="category-16-b0-New+Arrivals.html">New Arrivals<b class="caret"></b></a>

      <ul class="submenu level_2">
        <li class="menu-list level_2">
          <a href="category-1526-b0-30+Nov+2015.html">30 Nov 2015</a>

        </li>
        <li class="menu-list level_2">
          <a href="category-1525-b0-28+Nov+2015.html">28 Nov 2015</a>

        </li>
        <li class="menu-list level_2">
          <a href="category-1521-b0-26+Nov+2015.html">26 Nov 2015</a>

        </li>
        <li class="menu-list level_2">
          <a href="category-1510-b0-24+Nov+2015.html">24 Nov 2015</a>

        </li>
      </ul>
    </li>
    <li class="menu-list">
      <a href="category-1533-b0-about+us.html">about us</a>
    </li>
    <li class="menu-list">
      <a href="category-1534-b0-contact.html">contact</a>
    </li>
    <li class="menu-list">
      <a href="category-11-b0-Restock+Items.html">Restock Items<b class="caret"></b></a>

      <ul class="submenu level_2">
        <li class="menu-list level_2">
          <a href="category-1527-b0-30+Nov+2015.html">30 Nov 2015</a>

        </li>
      </ul>
    </li>
    <li class="menu-list">
      <a href="category-5-b0-Ready+Stock.html">Ready Stock<b class="caret"></b></a>

      <ul class="submenu level_2">
        <li class="menu-list level_2">
          <a href="category-1165-b0-Baby.html">Baby<b class="caret"></b></a>
          <ul class="submenu level_3">
            <li class="menu-list level_3">
              <a href="category-1536-b0-baby+child.html">baby child<b class="caret"></b></a>
              <ul class="submenu level_4">
                <li class="menu-list level_4">
                  <a href="category-1537-b0-baby+children.html">baby children<b class="caret"></b></a>
                  <ul class="submenu level_5">
                    <li class="menu-list level_5">
                      <a href="category-1538-b0-baby+children+2.html">baby children 2<b class="caret"></b></a>
                      <ul class="submenu level_6">
                        <li class="menu-list level_6">
                          <a href="category-1539-b0-baby+children+3.html">baby children 3</a>
                        </li>
                      </ul>

                    </li>
                  </ul>

                </li>
                <li class="menu-list level_4">
                  <a href="category-1543-b0-baby+children+clone.html">baby children clone</a>

                </li>
              </ul>
            </li>
            <li class="menu-list level_3">
              <a href="category-1542-b0-baby+child+2.html">baby child 2</a>
            </li>
          </ul>

        </li>
        <li class="menu-list level_2">
          <a href="category-960-b0-Jubah.html">Jubah<b class="caret"></b></a>
          <ul class="submenu level_3">
            <li class="menu-list level_3">
              <a href="category-1541-b0-Jubah+child.html">Jubah child</a>
            </li>
          </ul>

        </li>
        <li class="menu-list level_2">
          <a href="category-306-b0-Cheong+Sam.html">Cheong Sam</a>

        </li>
      </ul>
    </li>
  </ul>
</div>

在上面的代码片段中，我更改了以下内容：

li.menu-list {
  position: relative;
  z-index: 1;
}
/* parent menu hover effect*/

li.menu-list:hover {
  background: #ec3939;
  z-index: 2;
}

答案 1 :(得分：0)

您没有将position设置为子li元素，这就是z-index无法正常工作的原因。

替换：

li.menu-list:hover {
    background: #ec3939;
}

与

li.menu-list:hover {
    background: #ec3939;
    z-index: 1;
}

和 此

ul.menu li {
    display: block;
    float: left;
    background: #34495e;
    transform: skewX(25deg);
}

与

ul.menu li {
    display: block;
    float: left;
    background: #34495e;
    transform: skewX(25deg);
    position: relative;
}
相关问题
最新问题