I needed to force some list items that I was overlapping to look as if the earlier items were on top of the following items. This isn’t the normal flow of things, and I wanted a way that I could apply simply in many places on this site. And I’m sure many more in the future. See below for the code.
HTML
<ul class="example">
<li><a href="" class="active">View</a></li>
<li><a href="">Edit</a></li>
<li class="active"><a href="">Option 3</a></li>
<li><a href="">Option 4</a></li>
<li><a href="">Option 5</a></li>
</ul>Define the Mixin
=decending-z-order-tab($count: 20)
// assumes placement on UL
position: relative
li
position: relative
$t: 0
$i: $count
@while $i > 0
&:nth-child(#{$t})
z-index: #{$i}
$t: $t + 1
$i: $i - 1Sass
ul.example
+horizontal-list(0)
border-bottom: 1px solid gray
+decending-z-order-tab
li
border: 1px solid gray
border-bottom-width: 0
+border-top-radius
background-color: #e6e6e6
margin: 0 -2px
a
margin: 0 12pxGenerated CSS
ul.example { margin: 0; padding: 0; border: 0; outline: 0; overflow: hidden; *zoom: 1; border-bottom: 1px solid gray; position: relative; }
ul.example li { list-style-image: none; list-style-type: none; margin-left: 0px; white-space: nowrap; display: inline; float: left; padding-left: 0; padding-right: 0; }
ul.example li:first-child, ul.example li.first { padding-left: 0px; }
ul.example li:last-child, ul.example li.last { padding-right: 0px; }
ul.example li { position: relative; }
ul.example li:nth-child(0) { z-index: 20; }
ul.example li:nth-child(1) { z-index: 19; }
ul.example li:nth-child(2) { z-index: 18; }
ul.example li:nth-child(3) { z-index: 17; }
ul.example li:nth-child(4) { z-index: 16; }
ul.example li:nth-child(5) { z-index: 15; }
ul.example li:nth-child(6) { z-index: 14; }
ul.example li:nth-child(7) { z-index: 13; }
ul.example li:nth-child(8) { z-index: 12; }
ul.example li:nth-child(9) { z-index: 11; }
ul.example li:nth-child(10) { z-index: 10; }
ul.example li:nth-child(11) { z-index: 9; }
ul.example li:nth-child(12) { z-index: 8; }
ul.example li:nth-child(13) { z-index: 7; }
ul.example li:nth-child(14) { z-index: 6; }
ul.example li:nth-child(15) { z-index: 5; }
ul.example li:nth-child(16) { z-index: 4; }
ul.example li:nth-child(17) { z-index: 3; }
ul.example li:nth-child(18) { z-index: 2; }
ul.example li:nth-child(19) { z-index: 1; }
ul.example li { border: 1px solid gray; border-bottom-width: 0; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -o-border-top-left-radius: 5px; -ms-border-top-left-radius: 5px; -khtml-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; -o-border-top-right-radius: 5px; -ms-border-top-right-radius: 5px; -khtml-border-top-right-radius: 5px; border-top-right-radius: 5px; background-color: #e6e6e6; margin: 0 -2px; }
ul.example li a { margin: 0 12px; }
Comments
Interesting idea. I suggest adding an argument that is the base z-index that defaults to 0.
Add your comment