HTML layout Problem with css ? Float issu

Question

I am facing problem to solve layout issue. #container and #mid-banner are hiding behind layout. What is problem with my CSS code.

My code-:

https://codepen.io/jobnmk/pen/VwaVWGx

Answer 1

Use the z-index style.

The Z-index lets you control what should be behind and what should be in the front.

Your Welcome :D

Answer 2

For explanation of Taehodz :D 's answer.
Z-index property allows to determine which element should be placed before or above the other element .
Eg
.square{
z-index:5;
}
.circle{
z-index: 8 ;
}

In the above code circle element would be placed ahead of square because it has more z-index.

For more info this is the link of solo learn CSS course.
This link explains about CSS z-index property
https://www.sololearn.com/learn/CSS/1118/