How to overlap top div tags in css

Question

Can someone please explain to me how I can accomplish the following effect in CSS. I need a div on the bottom and two divs overlapping it on top as the image illustrates below.

Answer 1

The key is to adjust the top margin of the smaller divs. Setting it to a negative value will pull them over the larger one. See code below.

Alternatively, you could wrap the smaller divs in a larger one and adjust the bottom margin to pull them down below.

.under {
  width: 400px;
  height: 150px;
  background-color: #3C77D4;
}

.over{
  background-color: #0E49AC;
  width: 150px;
  height: 150px;
  display: inline-block;
  margin: 0 23px;
  margin-top: -80px;
}

<div class="under"></div>
<div class="over"></div>
<div class="over"></div>