<!DOCTYPE>
<html>
<head>
  <title>Test position of foreground layer when clipping</title>
  <style type="text/css" media="screen">
    .box {
      position: relative;
      display: inline-block;
      margin: 60px;
      width: 200px;
      height: 200px;
      border:10px solid black;
      color: blue;
      padding: 20px;
      -webkit-box-sizing: border-box;
      -webkit-box-shadow: black 0 0 10px;
      background-color:rgba(255, 255, 255, 0.8);
      font-size: 220%;
      font-weight: bold;
      will-change: transform;
    }

    .child {
      position: absolute;
      border:2px solid black;
      width: 150px;
      height: 150px;
      padding: 20px;
      color: gray;
      -webkit-box-sizing: border-box;
      will-change: transform;
    }
    
    .child > .child {
      height: 100px;
      width: 100px;
      top: 80px;
      background-color: green;
      font-size: 50%;
    }
    
    .negative {
      z-index: -1;
      left: -50px;
      top: -50px;
      background-color: rgba(200, 100, 100, 1);
    }

    .positive {
      z-index: 1;
      right: -50px;
      bottom: -50px;
      background-color: rgba(200, 200, 128, 1);
    }

  </style>
</head>
<body>

<p>The layering of the boxes should not be affected by overflow:hidden.</p>
<div class="box">
  Box contents
  <div class="negative child">
    Behind
    <div class="child">
      Behind behind
    </div>
  </div>
  <div class="positive child">
    In Front
  </div>
</div>

<div class="box" style="overflow: hidden;">
  Box contents
  <div class="negative child">
    Behind
    <div class="child">
      Behind behind
    </div>
  </div>
  <div class="positive child">
    In Front
  </div>
</div>

</body>
</html>