Исправлено положение div относительно фиксированного родителя div

Question

У меня есть странная дилемма, где мне нужен фиксированный div для размещения относительно его родителя, который также является фиксированным div.

Как только вы увидите мой пример, вы поймете.

<div class="drawer"> 
    <p>Drawer</p> 
</div> 
<div class="sub-drawer"> 
    <a href="#" class="close-drawer">x</a> 
    <p>Sub Drawer</p> 
</div> 

В основном я создаю ящик, который выходит из левой части страницы. Первый ящик - это меню, вспомогательный ящик - это место, где содержимое втягивается из того, что они нажимают в первом ящике. Дополнительный ящик можно прокручивать. Проблема в том, что я хочу, чтобы фиксированная позиция была закрыта в правом верхнем углу вспомогательного ящика, поэтому, когда они прокручиваются в вспомогательном ящике, тесная ссылка остается наверху, но я не могу понять, как это сделать.

Fiddle здесь: http://jsfiddle.net/z1n7kmky/

Answer 1

Ваши элементы используют фиксированное позиционирование, что означает, что все смещения (сверху, слева и т.д.) принимаются по отношению к экрану (корневой элемент).

Вот один из способов реализации вашего макета.

Добавить обертку вокруг вашего контента .wrap и позиции .wrap абсолютно в .sub-drawer и использовать top и bottom коррекций, чтобы сделать его заполнить пространство по мере необходимости.

Вызовите прокрутку по .wrap вместо .sub-drawer.

Теперь, позиция .close-drawer abosolutely по отношению к .sub-drawer как вы хотели первоначально.

Смотрите ниже или посетите скрипку: 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"> 
 
    <a href="#" class="close-drawer">x</a> 
 
    <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

Проблема заключается в том (как вы должны выяснили), фиксированный элемент уважения не один, он не берется из нормального потока страницы и уважает только верхний мастер штабелирования контекст, что это окно.

Единственный способ для работы - сделать элемент оболочки (.sub-drawer) действовать как контекст стекирования на странице. Единственный способ, которым я это знаю, - применить к нему свойство 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); 
}