具有transform属性的元素内的子元素z-index

Question

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

如代码片段所示，我有一些元素

transform: translate(0,0);

然后，在它们内部，我有一个“下拉”元素，当您单击按钮时会显示该元素。

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

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

我想知道是否有任何解决方案。我试图用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>

Answer 1

不幸的是，可能没有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');
  });
});

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

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

一个讨厌包装的hacky解决方案 - 你可以添加更多变换：

1. 为scaleY(-1)添加ul以使列表向后，因为具有较高索引的列表项目来自具有较低索引的列表项目。
2. 在scaleY(-1)添加一个倒置li，让世界恢复正常。
3. 同时清除li浮子。

见下面的演示：

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

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

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

如果仍然无法删除translate(0,0)，除了使用javascript之外别无选择：

1. 通过给出等于列表中索引的z-index来反转列表堆叠。
2. 将position:relative添加到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');
  });
});

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

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

Answer 2

z-index仅适用于其position属性已明确设置为绝对，固定或相对的元素。所以将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;
}

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

Answer 3

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

例：

$(document).ready(function() {
  $('button[name="button"]').click(function(e) {
    $(e.currentTarget).parents('li').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;
}

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

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