Question

我正在寻找一个仅限CSS的解决方案，在div上创建一个固定的标题，其中内容的滚动条在标题旁边（而不是标题下方）开始。要了解它的外观，请看一下这个小提琴：

在这里，我尝试采用以下方法：

HTML

<div class="outer">
    <div class="top">Title</div>
    <div class="body">
        <div class="content">
            .... Text Content here ...
        </div>
    </div>
</div>

CSS

.outer {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 200px;
    height: 300px;
}

.top {
    z-index: 2;
    position: absolute;
    height: 30px;
    width: 100%;
}

.body {
    z-index: 3;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.content {
    margin-top: 30px;
}

这种方法的问题是，内容位于标题之上（一旦开始滚动，您就会看到它）。然而，它感觉之类的，它非常接近解决方案。但由于我还没有在网上找到任何东西，我担心这只能用JavaScript来实现。那么这是真的还是仅针对这个问题的CSS解决方案？

Answer 1

将z-index上的body设为1，或z-index上top以下的任何数字。

编辑：你仍然有隐藏滚动条的问题，但是因为你说你想要滚动条旁边而不是标题，你可以通过调整内容类的宽度来改变它。

Answer 2

我找到了解决方案！诀窍是将z-index: -1应用于content元素，并从所有其他元素中删除z-index：

.outer {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 200px;
    height: 300px;
}

.top {
    position: absolute;
    height: 30px;
    width: 100%;
}

.body {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.content {
    position: relative;
    z-index: -1;
    margin-top: 30px;
}

这是更新的小提琴：http://jsfiddle.net/V4uL6/3/

CSS：div上的固定标题，滚动条从标题开始NEXT

2 个答案: