I need help displaying an HTML element behind a fixed header in my webpage. I want the div element (which is a child of the header) to appear beneath the header like a dropdown menu. However, I've tried adjusting the z-index and position properties without success. Please refer to this fiddle for reference: http://jsfiddle.net/wm3dk82x/4/
Take a look at the comments on the fiddle code. Despite trying various combinations of positions and z-index values, I couldn't achieve the desired effect. Here are snippets of the HTML and CSS:
.header {
background-color: red;
position: fixed; /* must remain fixed */
top: 0;
left: 0;
width: 100%;
height: 50px;
text-align: center;
z-index: 5;
}
.divinheader {
background-color: yellow;
position: fixed; /* changed for all options */
padding-top: 50px;
top: 0;
left: 90%;
width: 8%;
height: 20px;
text-align: center;
z-index: 2; /* lower than parent z-index (2 < 5) */
}<div class="header">fixed
<div class="divinheader">fixed1</div>
</div>
<div class="content">relative</div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>