How to keep the div fixed inside another div with absolute positioning

Question

On hover event I show a div which has absolute positioning, at the bottom of that div I need a fixed div.

Have a look at the image what I want to achieve. Div image

I have following code for this:

CSS

.showpro{position:absolute;z-index:999;width:500px;height:auto;display:none;max-height:500px;} .bottom{width:500px;position:fixed;bottom:0;left:0;}

CODE

<div class='showpro'> <div class='top'> </div> <div class='bottom'> </div> </div>

With this code, it comes at left-bottom corner of Container div. Can anyone say why? Any help?

Paul · Accepted Answer · 2014-11-14 07:59:52Z

An element with position: fixed is always positioned relative to the browser window. Try using position: absolute for that "fixed" element.

Here is an example which shows your expected result.

.container{ position:relative; width:100vw; height:100vh; background-color:brown; } .showpro{ position:absolute; z-index:999; width:200px; height:auto; max-height:300px; padding-bottom:80px; overflow:hidden; background-color:red; right:0; } .top{ overflow:auto; max-height:220px; margin-right: 20px; } .bottom{ width:200px; position:absolute; bottom:0; left:0; height:80px; background-color:green;}

<div class="container"><div class='showpro'> <div class='top'> Here can be a lot of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class='bottom'> This is the "fixed" element. </div> </div></div>

Sorry, I forgot to mention, max-height is provided for a div. So for absolute positioning, what happens is if content exceeds the maximum height provided, FIXED Div stays in the middle. There is some content above it, and there is some below it
Then please update your question to reflect the situation better.
Added an example to my answer to show how it works. Click on "Full page" to see the effect better.

Paul · Accepted Answer · 2014-11-14 07:51:39Z

Change position to relative for both the main div and the div inside main div :

Example: use this css code

#four { background-color: blue; height: 200px; position: relative; top: 50px; width: 100px; }

Collectives™ on Stack Overflow

How to keep the div fixed inside another div with absolute positioning

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related