CODEWITHSUNDEEP
htmlcss
Lukas Arvidsson
Lukas Arvidsson

Reputation: 467

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?

Upvotes: 2

Views: 168

Answers (3)

Harshita
Harshita

Reputation: 442

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

Upvotes: 0

Natalie Hedstr&#246;m
Natalie Hedstr&#246;m

Reputation: 2631

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>

Upvotes: 1

Paran0a
Paran0a

Reputation: 3457

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>

Upvotes: 1

Related Questions