Fixed div position relative to fixed div parent - html

Question

I have an odd dilemma where I need a fixed div to be positioned relative to it's parent, which is also a fixed div.
Once you see my example you will understand.
<div class="drawer">
<p>Drawer</p>
</div>
<div class="sub-drawer">
x
<p>Sub Drawer</p>
</div>
Basically I'm building a drawer that comes out from the left of the page. The first drawer is a menu, the sub drawer is where content is pulled in from something they click in the first drawer. The sub drawer can be scrollable. The issue is that I want a fixed position close link at the top right of the sub drawer, so when they scroll in the sub drawer, the close link stays at the top, but I can't figure out how to do it.
Fiddle here: http://jsfiddle.net/z1n7kmky/

Answer 1

Your elements use fixed positioning, which means that all the offsets (top, left and so on) are taken with respect to the screen (root element).
Here is one way of realizing your layout.
Add a wrapper around your content .wrap and position .wrap absolutely
within .sub-drawer, and use the top and bottom offsets to make it fill
the space as needed.
Invoke scrolling on .wrap instead of .sub-drawer.
Now, position .close-drawer abosolutely with respect to .sub-drawer as
you wanted initially.
See below or visit fiddle: http://jsfiddle.net/audetwebdesign/q6L7q70a/
.drawer {
position:fixed;
width:200px;
top:0;
left:0;
bottom:0;
background:#666;
padding:25px;
}
.sub-drawer {
position:fixed;
width:200px;
left:200px;
top:0;
bottom:0;
background:#999;
}
.sub-drawer .wrap {
position:absolute;
top:0;
bottom:0;
padding: 25px;
overflow: scroll;
}
.close-drawer {
position:absolute;
top:10px;
right: 25px;
border: 1px solid blue;
}
<div class="drawer">
<p>Drawer</p>
</div>
<div class="sub-drawer">
x
<div class="wrap">
<p>Sub Drawer</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis iaculis, dolor at malesuada gravida, mi arcu mollis quam, vel mattis velit mi eu arcu. Proin lacinia purus dignissim mi semper rutrum. Donec tellus ex, dignissim eget suscipit nec, bibendum in orci. Donec quam tellus, venenatis eget pharetra vitae, lacinia eget diam. Sed convallis lobortis ipsum, non consequat libero posuere quis. Quisque ac ex vitae felis tempor fringilla id vel nisl. Pellentesque auctor risus leo. Nam at purus bibendum, blandit ipsum id, interdum urna. Sed elementum, eros sed consectetur condimentum, lorem ex feugiat nibh, id tempor erat dolor et ligula. Aenean fermentum tempus lectus et consectetur. Phasellus pretium magna in ex interdum ornare. Praesent blandit mi mi, in egestas lectus vestibulum id. Donec a commodo quam. In non porttitor quam. Duis elementum mauris eu elit auctor, pellentesque pellentesque quam ornare.</p>
<p>Nam eget tincidunt enim, eget porttitor dui. Donec malesuada at metus in sollicitudin. Maecenas feugiat lorem tellus, eu faucibus purus gravida sagittis. Donec pulvinar porttitor semper. Cras nec laoreet urna. Donec porta mi in neque dictum, vitae venenatis leo fermentum. Duis imperdiet ante et velit posuere, a semper arcu cursus. Aliquam suscipit odio ac sem sollicitudin mattis. Vestibulum erat lacus, dignissim eu ultricies sed, consequat sed nulla. Sed sagittis metus id ligula blandit gravida.</p>
<p>Etiam quis arcu quis eros placerat semper. Praesent quam magna, sagittis vitae interdum in, dictum et enim. Nullam facilisis, elit vitae rutrum molestie, enim arcu euismod purus, ac scelerisque erat lectus porttitor magna. Ut ullamcorper nec nibh id aliquet. Sed quis tortor vel eros consequat dignissim. Nunc ut egestas dolor, lacinia sollicitudin est. Praesent accumsan nulla purus, sed scelerisque turpis aliquam porta. Cras commodo vestibulum molestie. Cras mollis nunc in gravida fermentum. Sed laoreet egestas odio, vel tempus ipsum vestibulum sit amet. Quisque cursus tempus nisi eu tristique. Duis quis nisl tempor, vestibulum diam at, sodales lorem. Phasellus quis justo nibh. Cras gravida pulvinar ante ut fringilla. Nullam placerat porta eros. Proin accumsan mauris mi, eu volutpat leo hendrerit nec.</p>
</div>
</div>
<div class="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis iaculis, dolor at malesuada gravida, mi arcu mollis quam, vel mattis velit mi eu arcu. Proin lacinia purus dignissim mi semper rutrum. Donec tellus ex, dignissim eget suscipit nec, bibendum in orci. Donec quam tellus, venenatis eget pharetra vitae, lacinia eget diam. Sed convallis lobortis ipsum, non consequat libero posuere quis. Quisque ac ex vitae felis tempor fringilla id vel nisl. Pellentesque auctor risus leo. Nam at purus bibendum, blandit ipsum id, interdum urna. Sed elementum, eros sed consectetur condimentum, lorem ex feugiat nibh, id tempor erat dolor et ligula. Aenean fermentum tempus lectus et consectetur. Phasellus pretium magna in ex interdum ornare. Praesent blandit mi mi, in egestas lectus vestibulum id. Donec a commodo quam. In non porttitor quam. Duis elementum mauris eu elit auctor, pellentesque pellentesque quam ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis iaculis, dolor at malesuada gravida, mi arcu mollis quam, vel mattis velit mi eu arcu. Proin lacinia purus dignissim mi semper rutrum. Donec tellus ex, dignissim eget suscipit nec, bibendum in orci. Donec quam tellus, venenatis eget pharetra vitae, lacinia eget diam. Sed convallis lobortis ipsum, non consequat libero posuere quis. Quisque ac ex vitae felis tempor fringilla id vel nisl. Pellentesque auctor risus leo. Nam at purus bibendum, blandit ipsum id, interdum urna. Sed elementum, eros sed consectetur condimentum, lorem ex feugiat nibh, id tempor erat dolor et ligula. Aenean fermentum tempus lectus et consectetur. Phasellus pretium magna in ex interdum ornare. Praesent blandit mi mi, in egestas lectus vestibulum id. Donec a commodo quam. In non porttitor quam. Duis elementum mauris eu elit auctor, pellentesque pellentesque quam ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis iaculis, dolor at malesuada gravida, mi arcu mollis quam, vel mattis velit mi eu arcu. Proin lacinia purus dignissim mi semper rutrum. Donec tellus ex, dignissim eget suscipit nec, bibendum in orci. Donec quam tellus, venenatis eget pharetra vitae, lacinia eget diam. Sed convallis lobortis ipsum, non consequat libero posuere quis. Quisque ac ex vitae felis tempor fringilla id vel nisl. Pellentesque auctor risus leo. Nam at purus bibendum, blandit ipsum id, interdum urna. Sed elementum, eros sed consectetur condimentum, lorem ex feugiat nibh, id tempor erat dolor et ligula. Aenean fermentum tempus lectus et consectetur. Phasellus pretium magna in ex interdum ornare. Praesent blandit mi mi, in egestas lectus vestibulum id. Donec a commodo quam. In non porttitor quam. Duis elementum mauris eu elit auctor, pellentesque pellentesque quam ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis iaculis, dolor at malesuada gravida, mi arcu mollis quam, vel mattis velit mi eu arcu. Proin lacinia purus dignissim mi semper rutrum. Donec tellus ex, dignissim eget suscipit nec, bibendum in orci. Donec quam tellus, venenatis eget pharetra vitae, lacinia eget diam. Sed convallis lobortis ipsum, non consequat libero posuere quis. Quisque ac ex vitae felis tempor fringilla id vel nisl. Pellentesque auctor risus leo. Nam at purus bibendum, blandit ipsum id, interdum urna. Sed elementum, eros sed consectetur condimentum, lorem ex feugiat nibh, id tempor erat dolor et ligula. Aenean fermentum tempus lectus et consectetur. Phasellus pretium magna in ex interdum ornare. Praesent blandit mi mi, in egestas lectus vestibulum id. Donec a commodo quam. In non porttitor quam. Duis elementum mauris eu elit auctor, pellentesque pellentesque quam ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis iaculis, dolor at malesuada gravida, mi arcu mollis quam, vel mattis velit mi eu arcu. Proin lacinia purus dignissim mi semper rutrum. Donec tellus ex, dignissim eget suscipit nec, bibendum in orci. Donec quam tellus, venenatis eget pharetra vitae, lacinia eget diam. Sed convallis lobortis ipsum, non consequat libero posuere quis. Quisque ac ex vitae felis tempor fringilla id vel nisl. Pellentesque auctor risus leo. Nam at purus bibendum, blandit ipsum id, interdum urna. Sed elementum, eros sed consectetur condimentum, lorem ex feugiat nibh, id tempor erat dolor et ligula. Aenean fermentum tempus lectus et consectetur. Phasellus pretium magna in ex interdum ornare. Praesent blandit mi mi, in egestas lectus vestibulum id. Donec a commodo quam. In non porttitor quam. Duis elementum mauris eu elit auctor, pellentesque pellentesque quam ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis iaculis, dolor at malesuada gravida, mi arcu mollis quam, vel mattis velit mi eu arcu. Proin lacinia purus dignissim mi semper rutrum. Donec tellus ex, dignissim eget suscipit nec, bibendum in orci. Donec quam tellus, venenatis eget pharetra vitae, lacinia eget diam. Sed convallis lobortis ipsum, non consequat libero posuere quis. Quisque ac ex vitae felis tempor fringilla id vel nisl. Pellentesque auctor risus leo. Nam at purus bibendum, blandit ipsum id, interdum urna. Sed elementum, eros sed consectetur condimentum, lorem ex feugiat nibh, id tempor erat dolor et ligula. Aenean fermentum tempus lectus et consectetur. Phasellus pretium magna in ex interdum ornare. Praesent blandit mi mi, in egestas lectus vestibulum id. Donec a commodo quam. In non porttitor quam. Duis elementum mauris eu elit auctor, pellentesque pellentesque quam ornare.</p>
</div>

Answer 2

The problem is (as you must have figured out), a fixed element respects no one, it is taken out of the normal page flow and only respects the top master stacking context, that is the window.
The only way for it to work is to make the wrapper element (.sub-drawer) act like a stacking context in the page. The only way I know for it is to apply a transform property to it. In order not to mess with the page you could add a useless scale transform:
Updated JsFiddle
.sub-drawer {
position:fixed;
width:200px;
left:200px;
top:0;
bottom:0;
background:#999;
overflow:scroll;
padding:25px;
transform: scale(1,1);
}