Make child div larger than fixed position parent div - html

Question

Please look at the following fiddle:
https://jsfiddle.net/a9ravkf5/3/
#navbar{
position: fixed;
top: 0;
left: 0;
height:40px;
background-color: grey;
width: 100%;
}
#sidebar{
position: fixed;
top: 40px;
left: 0;
z-index: 0;
height:100%;
width: 200px;
background-color: black;
}
#dropdown{
position: absolute;
top: 0px;
left 0px;
width: 500px;
color: #fff;
z-index: 10;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color: blue;
}
#content{
position: absolute;
top: 40px;
left: 200px;
right: 0px;
min-height: 300px;
background-color: green;
}
<div id="navbar">
</div>
<div id="sidebar">
<div id="dropdown">
This is a very long sentance that should be visible in its entirety.
</div>
</div>
<div id="content">
</div>
I want to make the blue element larger (wider) than the fixed position parent element. It is going to be a dropdown for selecting option inside the sidebar, and i want it to expand the the content inside and not wrap to multiple lines (larger height).
What is the best solution for doing this?

Answer 1

Your child div is larger than the containing fixed div.
The reason you can't see all of it is because your #content div is shown in front of your fixed #sidebar div.
Try adding a z-index to the #sidebar and #content divs like so:
#sidebar {
position: fixed;
top: 40px;
left: 0;
z-index: 0;
height: 100%;
width: 200px;
background-color: black;
z-index: 2; // Here we give the sidebar a larger z-index resulting in it being showed on top of the content.
}
#content {
position: absolute;
top: 40px;
left: 200px;
right: 0px;
min-height: 300px;
background-color: green;
z-index: 1; // Here we give the content a lower z-index resulting in it being showed beneath the sidebar.
}
#navbar {
position: fixed;
top: 0;
left: 0;
height: 40px;
background-color: grey;
width: 100%;
}
#dropdown {
position: absolute;
top: 0px;
left 0px;
width: 500px;
color: #fff;
z-index: 10;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color: blue;
}
<div id="navbar"></div>
<div id="sidebar">
<div id="dropdown">
This is a very long sentance that should be visible in its entirety.
</div>
</div>
<div id="content"></div>

Answer 2

Is this what you need?
You need to set appropriate z-index on your content div and sidebar.
#navbar{
position: fixed;
top: 0;
left: 0;
height:40px;
background-color: grey;
width: 100%;
}
#sidebar{
position: fixed;
top: 40px;
left: 0;
z-index: 10;
height:100%;
width: 200px;
background-color: black;
}
#dropdown{
position: absolute;
top: 0px;
left 0px;
width: 500px;
color: #fff;
z-index: 10;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color: blue;
}
#content{
position: absolute;
top: 40px;
left: 200px;
right: 0px;
z-index: 0;
min-height: 300px;
background-color: green;
}
<div id="navbar">
</div>
<div id="sidebar">
<div id="dropdown">
This is a very long sentance that should be visible in its entirety.
</div>
</div>
<div id="content">
</div>

Answer 3

you need to set two things
one is your 'z-index', in #sidebar .
and another one is 'min-height' in #content.
like
#sidebar{
position: fixed;
top: 40px;
left: 0;
z-index: 10;
height:100%;
width: 200px;
background-color: black;
}
#content{
position: absolute;
top: 40px;
left: 200px;
right: 0px;
min-height: 400px;
background-color: green;
}
and if you want to fix it then also add z-index:-1; in #content