Child over parent...

by JSDavi

HTML

<div class="wrapper">Wrapper
  <div class="parent">Parent
    <div class="brother">
      Brother
    </div>
    <div class="child">One
      <div class="child-child">
        Second
      </div>
    </div>
  </div>
</div>

CSS

.wrapper {
          position: relative;
          background: green;
          width: 220px;
          height: 120px;
          z-index: 10;
          text-algin: right;
          margin-left: 50px;
        }
        
        .parent {
          position: absolute;
          width: 150px;
          height: 100px;
          background: red;
          z-index: initial;
          margin-left: -30px;
        }
        .brother {
          width: 160px;
          height: 110px;
          background-color: yellow;
          margin-left: 10px;
          color: black;
          text-align: left;
          z-index: 1;
          position: absolute;
        }
        .child {
          position: absolute;
          background-color: blue;
          color: white;
          text-align: right;
          width: 160px;
          height: 110px;
          left: 50px;
          top: 10px;
          z-index: 0;
        }
        
        .child-child {
          position: absolute;
          z-index: 10;
          color: yellow;
          text-align: left;
          background-color: black;
          display: block;
          top: 40px;
          left: 20px;
          width: 150px;
          height: 100px;
        }