固定位置图层(div)相对于其父div(溢出:auto)

Question

我需要将子div设置为与其父div相关的固定(position:fixed).父div设置为overflow:auto.

只是为了明确我的观点:我不希望子屏幕相对于HTML屏幕被修复,而是与父div相关.父div滚动,因为它设置为overflow:auto.它有很多文本,导致滚动条出现(不是屏幕滚动条,而是div).我需要子div来保持与其父div相关的固定位置.

是否有纯HTML + CSS解决方案,或者只能通过javascript实现？

Answer 1

我明白你在说什么...... 基本上这就是问题所在.使用固定位置时,您可以在滚动时将元素粘贴在那里,但必须仅相对于窗口.如果你试图使它相对于容器position:absolute,它不会粘,但滚动内容...解决方案？包装当然!:d

基本结构是这样的:

HTML

<div class="blah">
    <div class="inner">text content</div>
    <div class="meh">fixed content</div>
</div>

CSS

div.blah
{
    position:relative;
}

div.inner
{
    width:500px;
    height:500px;
    overflow:auto;
}

div.meh
{
  background-color:#f00;
  position:absolute;
  left:20px;
  bottom:20px;   
}

请享用 :)