.wrapper {
  height: 500px;
}

.rel {
  position: relative;
  min-height: 300px;
}

div {
  min-width: 300px;
  padding: 10px;
}

form {
  margin: 2em 0;
}

[for="opacity"] {
  font-weight: bold;
}

[id=b], [id=c], [id=d], [id=e], [id=f], [id=g] {
  position: absolute;
}

[id=b], [id=c], [id=e] {
  height: 100px;
  line-height: 50px;
  width: 400px;
}

[id=a] {
  background: rgba(233, 30, 99, 0.5);
  height: 200px;
  text-align: right;
  width: 500px;
}

[id=b] {
  background: rgba(103, 58, 183, 0.8);
  bottom: 120px;
  width: 410px;
  z-index: 2;
}

[id=c] {
  background: rgba(255, 235, 59, 0.8);
  top: 190px;
  z-index: 1;
}

[id=d], [id=f], [id=g] {
  width: 300px;
}

[id=d] {
  background: #03a9f4;
  height: 100%;
  top: 10px;
  z-index: -1;
}
[id=d] p {
  position: absolute;
  bottom: 30px;
}

[id=e] {
  background: rgba(255, 87, 34, 0.7);
  top: 110px;
  z-index: 1;
}

[id=f], [id=g] {
  height: 200px;
  line-height: 100px;
  width: 400px;
}

[id=f] {
  background: rgba(255, 193, 7, 0.9);
}
[id=f] p {
  background: #222222;
  color: whitesmoke;
  position: relative;
  padding-left: 1rem;
  z-index: 1;
}

.opa {
  opacity: .999;
}

[id=g] {
  background: rgba(3, 169, 244, 0.7);
  top: 50px;
  left: 100px;
}
[id=g] p {
  bottom: 0;
  line-height: 1;
  position: absolute;
  right: 1rem;
}