具有转换属性

时间：2017-09-16 02:50:00

标签： html css css3 z-index css-transforms

我遇到了问题，我想知道你们是否可以帮助我。

如代码段所示，我有一些

的元素 
transform: translate(0,0);

然后，在他们内部，我有一个单击按钮时显示的“下拉”元素。

当这个下拉列表的一部分隐藏在其他元素后面时会出现问题，我发现这是因为它的父元素具有这个转换属性。

enter image description here

我的代码有更多内容，代码片段就是一个例子。我无法摆脱变换属性。

我想知道是否有任何解决方案。我正试图用CSS解决它。

干杯!! 

$(document).ready(function() {
  $('button[name="button"]').click(function(e) {
    $(e.currentTarget).parent().find('.template-options-dropdown').toggleClass('open');
  });
});
.boxes {
  list-style-type: none;
}

.boxes >li {
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 5px;
  transform: translate(0, 0);
}

.download-container {
  background: rgba(40, 39, 39, 0.8);
  bottom: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}

.download-container .dropdown-container {
  display: inline-block;
  position: relative;
}

.download-container .dropdown-container button {
  background: #0bb9ab;
  color: #fff;
  padding: 6px 12px;
}

.template-options-dropdown {
  list-style-type: none;
  text-align: left;
  padding: 0;
  position: absolute;
  background-color: #111;
  visibility: hidden;
}

.template-options-dropdown.open {
  visibility: visible;
}

.template-options-dropdown li a {
  color: white;
  text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="boxes">
  <li>
    <div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div>
  </li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
</ul>

3 个答案:

答案 0 :(得分：3)

不幸的是，可能没有仅限CSS的解决方案 - CSS3过渡会创建新的堆叠上下文 - 请参阅相关的文档说明，并this thread了解其他效果：

  

如果属性的值不是none，则为堆叠上下文   将被创建。

     

来源：MDN

您可以使用translate(0,0)轻松替换position: relative，并在z-index 添加.template-options-dropdown以上$(document).ready(function() { $('button[name="button"]').click(function(e) { $(e.currentTarget).parent().find('.template-options-dropdown').toggleClass('open'); }); });来解决问题

＆＃13;
＆＃13; 
.boxes {
  list-style-type: none;
}

.boxes >li {
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 5px;
  /*transform: translate(0, 0);*/
  position: relative; /*ADDED*/
}

.download-container {
  background: rgba(40, 39, 39, 0.8);
  bottom: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}

.download-container .dropdown-container {
  display: inline-block;
  position: relative;
}

.download-container .dropdown-container button {
  background: #0bb9ab;
  color: #fff;
  padding: 6px 12px;
}

.template-options-dropdown {
  list-style-type: none;
  text-align: left;
  padding: 0;
  position: absolute;
  background-color: #111;
  visibility: hidden;
  z-index: 2;/*ADDED*/
}

.template-options-dropdown.open {
  visibility: visible;
}

.template-options-dropdown li a {
  color: white;
  text-decoration: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="boxes">
  <li>
    <div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div>
  </li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
</ul>
＆＃13; 
scaleY(-1)
＆＃13;
＆＃13;
＆＃13;

hacky 解决方案会弄乱包装 - 您可以添加更多变换：

  1. 为ul添加scaleY(-1)以使列表向后移动，因为索引较高的列表项会覆盖索引较低的列表项。

    < / LI>

  2. 向li添加反转li，让世界恢复正常。

  3. clear $(document).ready(function() { $('button[name="button"]').click(function(e) { $(e.currentTarget).parent().find('.template-options-dropdown').toggleClass('open'); }); });花车。

    4. 见下面的演示：

    ＆＃13;
    ＆＃13; 
    .boxes {
  list-style-type: none;
  transform: scaleY(-1);/*ADDED*/
}
.boxes:after {/*ADDED*/
  content: '';
  clear: both;
  display: block;
}

.boxes >li {
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 5px;
  transform: translate(0, 0) scaleY(-1);/*ADDED*/
}

.download-container {
  background: rgba(40, 39, 39, 0.8);
  bottom: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}

.download-container .dropdown-container {
  display: inline-block;
  position: relative;
}

.download-container .dropdown-container button {
  background: #0bb9ab;
  color: #fff;
  padding: 6px 12px;
}

.template-options-dropdown {
  list-style-type: none;
  text-align: left;
  padding: 0;
  position: absolute;
  background-color: #111;
  visibility: hidden;
}

.template-options-dropdown.open {
  visibility: visible;
}

.template-options-dropdown li a {
  color: white;
  text-decoration: none;
}
    ＆＃13; 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="boxes">
  <li>
    <div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div>
  </li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
</ul>
    ＆＃13; 
    translate(0,0)
    ＆＃13;
    ＆＃13;
    ＆＃13;

    如果仍然无法移除z-index，则除了使用javascript之外别无选择：

    1. 通过使position:relative等于列表中的索引来反转列表堆叠。

    2. 将li添加到$(document).ready(function() { // ADDED $($('ul.boxes > li').get().reverse()).each(function(index){ $(this).css('z-index', index); }); $('button[name="button"]').click(function(e) { $(e.currentTarget).parent().find('.template-options-dropdown').toggleClass('open'); }); });

      3. 见下面的演示：

      ＆＃13;
      ＆＃13; 
      .boxes {
  list-style-type: none;
}

.boxes >li {
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 5px;
  transform: translate(0, 0);
  position: relative;/*ADDED*/
}

.download-container {
  background: rgba(40, 39, 39, 0.8);
  bottom: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}

.download-container .dropdown-container {
  display: inline-block;
  position: relative;
}

.download-container .dropdown-container button {
  background: #0bb9ab;
  color: #fff;
  padding: 6px 12px;
}

.template-options-dropdown {
  list-style-type: none;
  text-align: left;
  padding: 0;
  position: absolute;
  background-color: #111;
  visibility: hidden;
}

.template-options-dropdown.open {
  visibility: visible;
}

.template-options-dropdown li a {
  color: white;
  text-decoration: none;
}
      ＆＃13; 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="boxes">
  <li>
    <div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div>
  </li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
</ul>
      ＆＃13; 
      dplyr
      ＆＃13;
      ＆＃13;
      ＆＃13;

答案 1 :(得分：1)

Issued Date commercial Residential 1981-05 2 2 仅适用于其position属性已显式设置为绝对，固定或相对的元素。因此，将z-index应用于position: relative元素。

对于固定数量的元素，您可以尝试

li

或者对于未知数量的元素，您可以使用脚本动态应用它。

.boxes li:nth-child(1) {
  z-index: 8;
}

.boxes li:nth-child(2) {
  z-index: 7;
}

.boxes li:nth-child(3) {
  z-index: 6;
}

.boxes li:nth-child(4) {
  z-index: 5;
}

.boxes li:nth-child(5) {
  z-index: 4;
}

.boxes li:nth-child(6) {
  z-index: 3;
}

.boxes li:nth-child(7) {
  z-index: 2;
}

.boxes li:nth-child(8) {
  z-index: 1;
}

$(document).ready(function() {
  $('button[name="button"]').click(function(e) {
    $(e.currentTarget).parent().find('.template-options-dropdown').toggleClass('open');
  });
});
.boxes {
  list-style-type: none;
}

.boxes >li {
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 5px;
  transform: translate(0, 0);
  position: relative;
}

.download-container {
  background: rgba(40, 39, 39, 0.8);
  bottom: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}

.download-container .dropdown-container {
  display: inline-block;
  position: relative;
}

.download-container .dropdown-container button {
  background: #0bb9ab;
  color: #fff;
  padding: 6px 12px;
}

.template-options-dropdown {
  list-style-type: none;
  text-align: left;
  padding: 0;
  position: absolute;
  background-color: #111;
  visibility: hidden;
}

.template-options-dropdown.open {
  visibility: visible;
}

.template-options-dropdown li a {
  color: white;
  text-decoration: none;
}

.boxes li:nth-child(1) {
  z-index: 8;
}

.boxes li:nth-child(2) {
  z-index: 7;
}

.boxes li:nth-child(3) {
  z-index: 6;
}

.boxes li:nth-child(4) {
  z-index: 5;
}

.boxes li:nth-child(5) {
  z-index: 4;
}

.boxes li:nth-child(6) {
  z-index: 3;
}

.boxes li:nth-child(7) {
  z-index: 2;
}

.boxes li:nth-child(8) {
  z-index: 1;
}

答案 2 :(得分：1)

你关闭了，但如果是我，我会在.open或<li>上设置div.download-container课程，使用它设置一个巨大的z-index，并使用级联打开子菜单。我们还必须在我们设置z-index的元素上设置position:relative;，否则z-index什么都不做。

示例：

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('button[name="button"]').click(function(e) {
    $(e.currentTarget).parents('li').toggleClass('open');
  });
});
＆＃13; 
.boxes {
  list-style-type: none;
}

.boxes >li {
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 5px;
  transform: translate(0, 0);
  position:relative;
}

.boxes >li.open {
    z-index:500;
}

.download-container {
  background: rgba(40, 39, 39, 0.8);
  bottom: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}

.download-container .dropdown-container {
  display: inline-block;
  position: relative;
}

.download-container .dropdown-container button {
  background: #0bb9ab;
  color: #fff;
  padding: 6px 12px;
}

.template-options-dropdown {
  list-style-type: none;
  text-align: left;
  padding: 0;
  position: absolute;
  background-color: #111;
  visibility: hidden;
}

.boxes li.open .template-options-dropdown {
  visibility: visible;
}

.template-options-dropdown li a {
  color: white;
  text-decoration: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="boxes">
  <li>
    <div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div>
  </li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
  <li><div class="download-container">
      <div class="dropdown-container">
        <button type="button" name="button">Download</button>

        <ul class="template-options-dropdown">
          <li>
            <a href="#">Original</a>
          </li>
          <li>
            <a href="#">Thumb</a>
          </li>
          <li>
            <a href="#">Mobile</a>
          </li>
          <li>
            <a href="#">Tab</a>
          </li>
          <li>
            <a href="#">Web</a>
          </li>
          <li>
            <a href="#">Large web</a>
          </li>
        </ul>
      </div>
    </div></li>
</ul>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题