Skip to content

Instantly share code, notes, and snippets.

@maxw3st
Created July 15, 2013 04:31
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save maxw3st/5997523 to your computer and use it in GitHub Desktop.
CSS Puzzle: Reverse the z-order of the <li>s without setting a separate z-index on each one in a way that works in IE9 and up
/**
* CSS Puzzle: Reverse the z-order of the <li>s without setting a separate z-index on each one in a way that works in IE9 and up
I used flex box to solve this. "flex-direction:column-reverse; " reverses the stacking order of the li elements.
*/
div {
display: inline-flex;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
padding: 1em 2em 1em 1em;
border: 1px solid rgba(0,0,0,.3);
border-radius: 0 999px 999px 0;
background: beige;
box-sizing: content-box;
}
section ~ div:not(:first-child) {
position: relative;
left: -1.6em;
}
<section>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
</section>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment