Child element z-index inside element with transform property

Question

I'm having a problem and I'd like to know if you guys can help me out with it.

As shown in the snippet, I have some elements with

transform: translate(0,0);

And then, inside them, I have a "dropdown" element that is shown when you click a button.

The problem comes when part of this dropdown gets hidden behind other elements, and I found out that this is happening because its parent element has this transform property.

My code has more stuff, the snippet is just an example. I can't get rid of the transform property.

I'd like to know if there is any solution for this. I'm trying to solve it using just CSS.

Cheers!!

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

kukkuz · Accepted Answer · 2017-09-16T04:23:53.850

Unfortunately, there maybe no CSS-only solution - CSS3 transitions creates a new stacking context - see the relevant doc description and this thread for another effect:

If the property has a value different than none, a stacking context will be created.

Source: MDN

You can easily replace translate(0,0) there with position: relative and add a z-index more than zero to .template-options-dropdown to solve the problem.

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

A hacky solution that messes up the wrapping - you can add more transforms:

Add scaleY(-1) for the ul to make the list backwards because of the fact that the a list item with higher index comes over the one with a lower index.
Add an inversion scaleY(-1) to the li to bring the world back to normal.
Also clear the li floats.

See demo below:

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

If translate(0,0) still can't be removed, you have no option other than use javascript:

Invert the list stacking by giving a z-index equal to the index in the list.
Add position:relative to the li

See demo below:

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

score 1 · Answer 2 · 2017-09-16T04:02:38.677

z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative. So apply position: relative to the li element.

For fixed number of elements, you can try

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

Or for unknown number of elements, you can apply it dynamically with the script.

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

Thanks for your answer Anurag. The thing is that those li could be more or less, so... that solution is not good in that case. — JV Lobo, Sep 16 '17 at 04:01
Like I mentioned in the answer, for unknown number of elements, you can apply the styles using dynamically with the script. — , Sep 16 '17 at 04:03
Yeah, sorry. I was trying to find a solution with just CSS :) thanks! — JV Lobo, Sep 16 '17 at 04:06

score 1 · Answer 3 · answered Sep 16 '17 at 04:31

You're close, but if it was me I would set the .open class on either the <li> or the div.download-container, set a massive z-index using that, and use the cascade to open the sub-menu. We also have to set position:relative; on the element that we're setting z-index on, otherwise z-index does nothing.

Example:

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

Child element z-index inside element with transform property

3 Answers3