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

Question

我需要将子div设置为相对于其父div的fixed (position: fixed)。父div设置为overflow: auto.

只是为了让我的观点非常清楚:我不希望子div与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;   
}

享受:)

Answer 2

在不看HTML的情况下说这有点棘手，但你可以试试:

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

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