css - 相对于滚动区域的位置

Question

我想将一个 div 绝对定位在滚动区域的顶部和底部，这样当我在 div 内滚动时它们就留在原地。

它们的滚动区域有 position: relative; 设置，我想固定到顶部和底部的 div 绝对定位在 top: 0; 和 底部:0；

最初它们按预期定位，但当您滚动时它们会在滚动区域内滚动。

这是显示我的问题的代码笔: http://codepen.io/JoeHastings/pen/wKJzNb

Answer 1

我不知道有什么方法可以在不使用 javascript 的情况下修复另一个元素。如果你知道盒子的位置，你可以像这样使用固定定位:

http://codepen.io/anon/pen/pjeRQQ

.transcript {
    position: relative;
    width: 400px;
    height: 150px;
    background: #ffcc00;
    overflow-y: scroll;

    &:before {
        content: '';
        position: fixed;
        width: 400px; height: 20px;
        margin-top: 0; margin-left: 0;

        background: -webkit-linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
        background: -moz-linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
        background: -o-linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
        background: linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
    }

    &:after {
        content: '';
        position: fixed;
        top: 140px; left: 0;
        width: 400px; height: 20px;

        background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 1) 100%);
        background: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 1) 100%);
        background: -o-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 1) 100%);
        background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 1) 100%);
    }
}