Fixed positioned div within a relative parent div

Question

I am currently building a responsive website and need a menu to be fixed, thus not scrolling when the rest of the site scrolls. the issue is that it is a fluid layout and i want the "fixed positioned" menu item to be fixed relative to the containing parent element and not to browser window. is there anyway this can be done?

Answer 1

This question came first on Google although an old one so I'm posting the working answer I found, which can be of use to someone else.

This requires 3 divs including the fixed div.

HTML

<div class="wrapper">     <div class="parent">         <div class="child"></div>     </div> </div> 

CSS

.wrapper { position:relative; width:1280px; }     .parent { position:absolute; }         .child { position:fixed; width:960px; } 

Answer 2

Gavin,

The issue you are having is a misunderstanding of positioning. If you want it to be "fixed" relative to the parent, then you really want your #fixed to be position:absolute which will update its position relative to the parent.

This question fully describes positioning types and how to use them effectively.

In summary, your CSS should be

#wrap{      position:relative; } #fixed{      position:absolute;     top:30px;     left:40px; }