roobie/docs/utilities/z-index.md

A collection of CSS classes to keep you writing business logic in your HTML. Easily build maintainable web & mobile applications with 100s of pre-built CSS classes at your fingertips.

# Z Index

## Classes
```html
<div class="z0">-1</div>
<div class="z1">1</div>
<div class="z2">5</div>
<div class="z3">10</div>
<div class="z4">25</div>
<div class="z5">50</div>
<div class="z6">100</div>
```

## Usage
<div class="mrgv" style="height: 40px;">
    <div class="absolute div100 z6 bg-black1 white">z6</div>
    <div class="absolute div90 z5 bg-red white">z5</div>
    <div class="absolute div75 z4 bg-orange white">z4</div>
    <div class="absolute div50 z3 bg-yellow">z3</div>
    <div class="absolute div33 z2 bg-green white">z2</div>
    <div class="absolute div25 z1 bg-blue white">z1</div>
    <div class="absolute div10 z0 bg-indigo white">z0</div>
</div>

<div class="mrgv" style="height: 40px;">
    <div class="absolute div100 z0 bg-black1 white">z0</div>
    <div class="absolute div90 z1 bg-red white">z1</div>
    <div class="absolute div75 z2 bg-orange white">z2</div>
    <div class="absolute div50 z3 bg-yellow">z3</div>
    <div class="absolute div33 z4 bg-green white">z4</div>
    <div class="absolute div25 z5 bg-blue white">z5</div>
    <div class="absolute div10 z6 bg-indigo white">z6</div>
</div>

```html
<div class="mrgv" style="height: 40px;">
    <div class="absolute div100 z6 bg-black1 white">z6</div>
    <div class="absolute div90 z5 bg-red white">z5</div>
    <div class="absolute div75 z4 bg-orange white">z4</div>
    <div class="absolute div50 z3 bg-yellow">z3</div>
    <div class="absolute div33 z2 bg-green white">z2</div>
    <div class="absolute div25 z1 bg-blue white">z1</div>
    <div class="absolute div10 z0 bg-indigo white">z0</div>
</div>

<div class="mrgv" style="height: 40px;">
    <div class="absolute div100 z0 bg-black1 white">z0</div>
    <div class="absolute div90 z1 bg-red white">z1</div>
    <div class="absolute div75 z2 bg-orange white">z2</div>
    <div class="absolute div50 z3 bg-yellow">z3</div>
    <div class="absolute div33 z4 bg-green white">z4</div>
    <div class="absolute div25 z5 bg-blue white">z5</div>
    <div class="absolute div10 z6 bg-indigo white">z6</div>
</div>
```