A Stellar Sass Map for z-index

In this example below you will see how to do a A Stellar Sass Map for z-index with some HTML / CSS and Javascript

Code to showcase the Sass map technique I use to manage the z-index stack. Read the full article here: http://praliedutzel.com/stellar-sass-map-z-index/

Thumbnail
This awesome code was written by praliedutzel, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright praliedutzel ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Stellar Sass Map for z-index</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header class="header">
  <h1 class="header__title">A Stellar Sass Map for z-index</h1>
  <a href="http://praliedutzel.com/stellar-sass-map-z-index/" target="_blank">Read the Article</a>
</header>

<div class="solar-system">
  <div class="planet planet--mercury">
    <span class="planet__name">Mercury</span>
  </div>
  <div class="planet planet--venus">
    <span class="planet__name">Venus</span>
  </div>
  <div class="planet planet--earth">
    <span class="planet__name">Earth</span>
  </div>
  <div class="planet planet--mars">
    <span class="planet__name">Mars</span>
  </div>
  <div class="planet planet--jupiter">
    <span class="planet__name">Jupiter</span>
  </div>
  <div class="planet planet--saturn">
    <span class="planet__name">Saturn</span>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/praliedutzel/a-stellar-sass-map-for-z-index-pEzYgy */
.solar-system {
  width: 100%;
  max-width: 25rem;
  margin: 0 auto;
  padding: 2rem;
  position: relative;
}

.planet {
  background-color: #000;
  width: 5rem;
  height: 5rem;
  position: absolute;
  display: block;
  border-radius: 50%;
}

.planet--mercury {
  background-color: #bdc3c7;
  z-index: -99;
}

.planet--venus {
  background-color: #f1c40f;
  margin-left: 4rem;
  z-index: -1;
}

.planet--earth {
  background-color: #3498db;
  margin-left: 8rem;
  z-index: 1;
}

.planet--mars {
  background-color: #c0392b;
  margin-left: 12rem;
  z-index: 99;
}

.planet--jupiter {
  background-color: #d35400;
  margin-left: 16rem;
  z-index: 999;
}

.planet--saturn {
  background-color: #9b59b6;
  margin-left: 20rem;
  z-index: 9999;
}

.planet__name {
  top: 50%;
  left: 50%;
  position: absolute;
  font-size: 0.8rem;
  text-align: center;
  transform: translate(-50%, -50%);
}

body {
  background-color: #f9f9f9;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
  text-align: center;
}

.header {
  background-color: #232439;
  padding: 4rem 2rem;
  text-align: center;
}
.header a {
  margin-top: 1rem;
  display: block;
  color: #6ddce5;
  font-size: 0.85rem;
  text-decoration: none;
}

.header__title {
  margin: 0;
  color: #fff;
  font-weight: 300;
}

Comments