EC System

Z index

Documentation • Demo

Z-index utilities

Use the following classes to quickly set a z-index:

  • ecl-u-z-auto: Default z-index (auto)
  • ecl-u-z-zero: No z-index (0)
  • ecl-u-z-highlight: Used for more important elements (1)
  • ecl-u-z-navigation: Used for navigation elements (10)
  • ecl-u-z-dropdown: Used for dropdown elements (15)
  • ecl-u-z-modal: Used for modal elements (20)
  • ecl-u-z-max: Very high z-index (9999)
<style>
  .example {
    border: 2px solid #000;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.5);
    box-sizing: border-box;
    margin-top: -1.2rem;
    padding: 2rem;
    position: relative;
    width: 60%;
  }
  .example:first-child {
    margin-top: 0;
  }
  .example:nth-child(even) {
    background-color: #404040;
    color: #fff;
    float: left;
    margin-left: 10%;
    text-align: right;
  }
  .example:nth-child(odd) {
    background-color: #ebebeb;
    color: #404040;
    float: right;
    margin-right: 10%;
    text-align: left;
  }
</style>

<div>
  <div class="example ecl-u-z-auto">ecl-u-z-auto</div>
  <div class="example ecl-u-z-zero">ecl-u-z-zero</div>
  <div class="example ecl-u-z-highlight">ecl-u-z-highlight</div>
  <div class="example ecl-u-z-navigation">ecl-u-z-navigation</div>
  <div class="example ecl-u-z-dropdown">ecl-u-z-dropdown</div>
  <div class="example ecl-u-z-modal">ecl-u-z-modal</div>
  <div class="example ecl-u-z-max">ecl-u-z-max</div>
</div>
 
/* No context defined for this component. */
 
<style>
  .example {
    border: 2px solid #000;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    margin-top: -1.2rem;
    padding: 2rem;
    position: relative;
    width: 60%;
  }

  .example:first-child {
    margin-top: 0;
  }

  .example:nth-child(even) {
    background-color: #404040;
    color: #fff;
    float: left;
    margin-left: 10%;
    text-align: right;
  }

  .example:nth-child(odd) {
    background-color: #ebebeb;
    color: #404040;
    float: right;
    margin-right: 10%;
    text-align: left;
  }
</style>

<div>
  <div class="example ecl-u-z-auto">ecl-u-z-auto</div>
  <div class="example ecl-u-z-zero">ecl-u-z-zero</div>
  <div class="example ecl-u-z-highlight">ecl-u-z-highlight</div>
  <div class="example ecl-u-z-navigation">ecl-u-z-navigation</div>
  <div class="example ecl-u-z-dropdown">ecl-u-z-dropdown</div>
  <div class="example ecl-u-z-modal">ecl-u-z-modal</div>
  <div class="example ecl-u-z-max">ecl-u-z-max</div>
</div>
  • Content: 
    /**
 * Z-index utilities
 */

// Import base and generic
@import '@ecl/ec-base/ec-base';
@import '@ecl/generic-utility-z-index/generic-utility-z-index';

// Use generic mixin
@include exports('ec-utility-z-index') {
  @include ecl-utility-z-index();
}
  • URL: /components/raw/ec-utility-z-index/ec-utility-z-index.scss
  • Filesystem Path: ../../src/systems/ec/ec-utility/ec-utility-z-index/ec-utility-z-index.scss
  • Size: 252 Bytes
  • Handle: @ecl/ec-utility-z-index
  • Preview:
  • Filesystem Path: ../../src/systems/ec/ec-utility/ec-utility-z-index/ec-utility-z-index.twig