Apply z-index to make menu always on top

by KELVIN LEE

HTML

<div class="header">Header Area 
    <p>1</p>
    <p></p>    <p></p>    <p></p>    <p></p>    <p></p>    <p> </p>    <p>123</p>    <div class="menu">Menu Area Menu Area Menu Area Menu Area Menu Area Menu Area Menu Area Menu Area Menu Area </div>
</div>
<div class="banner">Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner Banner </div>

CSS

div {
    display: block;
    position: relative;
    width: 100px;
}
.header {
    z-index: 11;
    color: white;
    width: 100%;
    height: 50px;
    overflow: visible;
    position: absolute;
    background-color: rgba(255, 0, 0, 0.5) !important;
}
.menu {
    background-color: rgba(128, 128, 128, 1);
    position: absolute;
    top: 10px;
    right: 10px;
    height: 300px;
    z-index: 20;
}
.banner {
    color: red;
    background-color: rgba(0, 0, 255, 0.8);
    top: 50px;
    width: 100%;

    z-index:10;
}