Question

我有一个以overflow-y:auto作为容器的div，还有两个div：一个用于标题，一个用于内容。

我需要滚动容器，但标题必须是静态的。像这样：

<div class="table-container">
    <div class="table-title">
        <h2>My Title</h2>
    </div>
    <div class="table-content">
        ...
    </div>
</div>

我尝试position:absolute到.table-title，但没有停留在最前面。

这是一个演示：http://jsfiddle.net/junihh/faqm85xy/1/

如何在容器顶部设置.table-title的固定位置？

感谢任何帮助或评论。

Answer 1

我认为你只想让内容区域可滚动，而不是标题。在这种情况下，不需要固定的位置。

.table-title {
    background-color: #666;
}
.table-content {
    height: 200px; /*set a height*/
    overflow-y: auto;
}

＆＃13;

.table-container {
    margin: 0 auto;
    width: 350px;
    background-color: #DBDBDB;
}
.table-title {
    background-color: #666;
}
.table-content {
    height: 200px; /*set a height*/
    overflow-y: auto;
}
h2, p {
    margin: 0;
    padding: 10px 15px;
    font: normal 1em/1 Arial, Helvetica, sans-serif;
}
h2 {
    font-size: 1.2em;
    color: #FFF;
    font-weight: bold;
}
p {
    line-height: 140%;
}
p:nth-of-type(odd) {
    background-color: #EBEBEB;
}

＆＃13;

<div class="table-container">
    <div class="table-title">
        <h2>My Title</h2>
    </div>
    <div class="table-content">
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
    </div>
</div>

＆＃13;

更新演示： http://jsfiddle.net/7ngg8f03/

Answer 2

固定定位是相对于浏览器窗口的。

相反，您可能需要absolute定位。 absolute个定位元素相对于非静态定位的第一个父元素定位。

因此，通过制作.table-container position: relative;，我们可以相对于其容器设置标题位置。

注意：绝对位置元素需要设置顶部或底部和左或右。否则，您最终会在浏览器中出现一些不一致的行为。

以下CSS可以帮助您：

.table-container {
    position: relative;
    /* Set padding-top to the total height of .table-title to fix the scrollbar */
    padding-top: 67px;

    /* Set width & height to the desirable size. */
    width: 300px;
    height: 300px;
}

.table-title {
    position: absolute;
    top: 0px;
    left: 0px;
    /* set background color so that it isn't transparent. */
    background-color: white;
}

.table-content {
    overflow-y: auto;
}

这是我的jsFiddle：http://jsfiddle.net/y3k0h9cx/

如何在div顶部设置固定位置而不滚动

2 个答案: