Center One Div Above Two Other Divs

I would like to achieve this situation: The page contains 4 divs in total. The main layer is divided in 3 divs. Above div1 and div2, another div(div4) must be floating above them

Solution 1:

If your issue is just how to get that layout this can help:

* {
  margin: 0
}
html,
body {
  height: 100%;
}
div {
  height: 33.3%;
}
.one {
  background: red;
}
.two {
  background: green;
}
.three {
  background: blue;
}
.four {
  position: absolute;
  background: yellow;
  top: 17%;
  left: 30%;
  width: 40%;
}

<divclass="one"></div><divclass="two"></div><divclass="three"></div><divclass="four"></div>

---

But this is just visual boxes, if you have more requirements can be a little tricky.