Lukas Arvidsson Lukas Arvidsson - 6 months ago 23
HTML Question

Make child div larger than fixed position parent div

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

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>