Europa Component Library

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);
    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);
    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: 
    /*
  ECL Z-index
  ===========

  Base:
    z = z-index
*/

@each $key, $value in $ecl-z-index {
  .ecl-u-z-#{$key} {
    z-index: $value;
  }
}
  • URL: /components/raw/ecl-u-z-index/ecl-u-z-index.scss
  • Filesystem Path: framework/utilities/ecl-u-z-index/ecl-u-z-index.scss
  • Size: 145 Bytes
  • Handle: @ec-europa/ecl-u-z-index
  • Preview:
  • Filesystem Path: framework/utilities/ecl-u-z-index/ecl-u-z-index.twig