component overlap

by Saksham Malhotra

HTML

<div class="component1">
  component1
  <div class="component2">
    cmponent2
  </div>
</div>
<div class="component3">
  component3
</div>

CSS

.component1 {
  background-color: rgba(100, 0, 0, 0.1);
  height: 300px;
  width: 100%;
  position: relative;
}

.component2 {
  position: absolute;
  bottom: 0;
  transform: translate(0, 100%);
  right: 0;
  height: 100px;
  width: 200px;
  background-color: rgba(0, 100, 0, 0.1);
}

.component3 {
  height: 200px;
  background-color: rgba(0, 0, 100, 0.1);
}