Question

我需要将子div设置为与其父div相关的固定（position：fixed）。父div设置为overflow：auto。

只是为了明确我的观点：我不希望修改子div与HTML屏幕相关，而是与父div相关。父div滚动，因为它设置为overflow：auto。它有很多文本，导致滚动条出现（不是屏幕滚动条，而是div）。我需要子div来保持与其父div相关的固定位置。

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

Answer 1

我看到你在说什么...... basically this is the problem。使用固定位置时，您可以在滚动时将元素粘贴在那里，但必须仅相对于窗口。如果你尝试使用position:absolute使它相对于容器，它不会粘住，而是滚动内容......解决方案？ a wrapper of course！：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;   
}

享受：）

Answer 2

在不查看HTML的情况下说它有点棘手，但您可以尝试：

.child {
   position: absolute;
   top: 0;  /* or any other value */
   left: 0;
}

.parent {
   position: relative;
}

您还需要另一个子div来包装滚动内容。

固定位置图层（div）相对于其父div（溢出：auto）

2 个答案:

HTML

CSS