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>

基本上我是在构建一个从页面左侧出来的抽屉。第一个抽屉是菜单，子抽屉是从第一个抽屉中点击的内容中拉出内容的地方。子抽屉可以滚动。问题是我想在副抽屉的右上方有一个固定位置关闭链接，所以当它们在子抽屉中滚动时，关闭链接保持在顶部，但我无法弄清楚如何做到这一点

在这里小提琴：http://jsfiddle.net/z1n7kmky/

Answer 1

问题是（正如你必须想到的那样），一个固定的元素不受任何人的影响，它被从正常的页面流中取出，并且只考虑顶层主堆叠上下文，即窗口。

它的唯一工作方式是使包装器元素（.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);
}

Answer 2

您的元素使用固定定位，这意味着所有偏移（顶部，左侧等）都是相对于屏幕（根元素）拍摄的。

这是实现布局的一种方法。

在内容.wrap周围添加包装，并绝对定位.wrap 在.sub-drawer内，并使用top和bottom偏移量来填充根据需要的空间。

在.wrap而不是.sub-drawer上调用滚动。

现在，.close-drawer绝对定位.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>

固定相对于固定div父级的div位置

2 个答案: