I have a unique navigation setup where there is a striking red box protruding. The challenge I am facing is making sure this red box overlaps all the Divs below it. I initially tried setting a margin for spacing, but found that it was affecting the layout of child elements within other sections as well. To address this, I attempted using negative margins on the children of the section below to create overlap, but my goal is to have the red box appear on top. Despite utilizing z-index, I have not been able to achieve the desired effect.
If you'd like to explore the example further, please check out my Jsfiddle here: http://jsfiddle.net/1qsuvhnd/29/
HTML
<nav>
<div id="ribbon"></div>
</nav>
<div id="context">
<div class="link"></div>
</div>
CSS
#context {
width: auto;
padding: 20px;
height: 300px;
background-color: blue;
z-index: 1;
}
#context .link {
float: Left;
height: 260px;
width: 300px;
margin-left: -140px;
background-color: White;
z-index:1 !important;
}
nav {
width: auto;
height: 65px;
background-color: black;
z-index:99 !important;
clear:both;
}
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index= 99;
}