<div class="example0">
  <div class="div1"><code>z-index: 2147483647</code></div>
  <div class="div2"><code>z-index: 2147483647</code></div>
</div>
<div class="example1">
  <div class="div1"><code>z-index: 2147483647 + 1</code></div>
  <div class="div2"><code>z-index: 2147483647</code></div>
</div>

<div class="example2">
  <div class="div1"><code>z-index: 2147483647</code></div>
  <div class="div2"><span><code>z-index: 2147483647-1</code></span></div>
</div>
div{
  width: 200px;
  height: 4em;
  position: relative;
  color: #fff;
  line-height: 1.2;
  .div1,
  .div2{
    position: absolute;
  }
}

.div1{
  background-color: #f00;
  top: 0;
}
.div2{
  background-color: #00f;
  left: 1.2em;
  top: 1.2em;
}

.example0 {
  .div1{
    z-index: 2147483647;
  }
  .div2{
    z-index: 2147483647;
  }
}

.example1 {
  margin-top: 2em;
  .div1{
    z-index: calc(2147483647 + 1);
  }
  .div2{
    z-index: 2147483647;
  }
}
.example2 {
  margin-top: 2em;
  .div1{
    z-index: 2147483647;
  }
  .div2{
    z-index: calc(2147483647 - 1);
    span{
      position: absolute;
      bottom: 0;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.