Html CSS-标题保留在容器顶部

我有一个可以滚动内容的容器。我希望容器中的标题始终保持在顶部

容器：

.lists {
    width: 300px;
    height: 250px;  
    margin: 30px auto;
    background: #39C;
    overflow: scroll;
    position: relative;
}

标题：

.box_header {
    width: 100%;
    height:30px;
    overflow:hidden;
    position: absolute;
    margin: 0;
    background: #DDD;
    z-index: 999;
}

---

相对位置中的任何绝对位置都是相对容器的绝对位置。为了使标题保持在原位，您需要将其定位在滚动容器的上方，而不是内部。

相对位置中的任何绝对位置都是相对容器的绝对位置。为了使标题保持在位，您需要将其定位在滚动容器的上方，而不是内部。

如果需要非css修复，请添加此侦听器

$('.lists').scroll(function() {
    $('.box_header', this).css('top', $(this).scrollTop()+'px');
});

然后更改。列出css以给出相对位置

.box_header {
    width: 100%;
    height:30px;
    overflow:hidden;
    position: relative;
    margin: 0;
    background: #DDD;
    z-index: 999;
}

---

如果您想要非css修复，请添加此侦听器

$('.lists').scroll(function() {
    $('.box_header', this).css('top', $(this).scrollTop()+'px');
});

然后更改。列出css以给出相对位置

.box_header {
    width: 100%;
    height:30px;
    overflow:hidden;
    position: relative;
    margin: 0;
    background: #DDD;
    z-index: 999;
}

---

如果您愿意更改您的加价，以下是一种方法：

<div class="lists">
    <header class="box_header">
        <h1>HEADER 2</h1>
        <div class="setting" id="btn2"></div>
    </header>
    <section class="content">
        <p>Lorem Ipsum ....</p>
    </section>
</div>

请看小提琴：

更高级的示例

如果您研究以下示例：

uou可以看到如何在半灵活的布局中应用滚动框。 我将两个滚动框并排排列，使它们的宽度与页面的宽度成比例

高度的调整比较棘手。我固定了父容器的高度，请参见以下规则：

.contentWrapper {
    border: 1px solid red;
    margin-top: 1.00em;
    padding: 30px 0;
    overflow: auto;
    height: 400px;
}

如果将高度从400px更改为其他值，滚动框将自行调整

---

希望这些示例能让您和其他人对如何构建这些更高级的布局设计有更多的了解。

如果您愿意更改标记，以下是一种方法：

<div class="lists">
    <header class="box_header">
        <h1>HEADER 2</h1>
        <div class="setting" id="btn2"></div>
    </header>
    <section class="content">
        <p>Lorem Ipsum ....</p>
    </section>
</div>

请看小提琴：

更高级的示例

如果您研究以下示例：

uou可以看到如何在半灵活的布局中应用滚动框。 我将两个滚动框并排排列，使它们的宽度与页面的宽度成比例

高度的调整比较棘手。我固定了父容器的高度，请参见以下规则：

.contentWrapper {
    border: 1px solid red;
    margin-top: 1.00em;
    padding: 30px 0;
    overflow: auto;
    height: 400px;
}

如果将高度从400px更改为其他值，滚动框将自行调整

---

希望这些示例能让您和其他人更深入地了解如何构建这些更高级的布局设计。

看看添加位置：固定到页眉div.box\u页眉。您可能需要在section.content中添加框头div高度的填充，但设置为30px就可以了。IE6和更低版本在固定定位方面存在问题，但希望我们现在能够接受这一点-使用它的人比仍然在听Moby的人要少。

看看添加位置：固定到标题div.box\u标题。您可能需要在section.content中添加框头div高度的填充，但设置为30px就可以了。IE6和更低版本在固定定位方面存在问题，但希望我们现在能够接受这一点-使用它的人比仍然在听Moby的人要少。

如果

section.content{…}

需要灵活调整，例如

宽度：100%和<代码>高度：100%如何做到这一点？一般来说，灵活的宽度相对容易：在
部分。container
可以设置
宽度：100%
，它将基于父容器继承宽度
。列表
。高度有点复杂；它取决于
列表的高度，是否会固定？如何在页面布局中使用它？如果你能提供更多的设计细节，我们可能会更具体地帮助你。你的例子仍然有一个问题。当您按下蓝色按钮时，内容会随之向下滑动。我做这把小提琴是为了说明我的意思：现在卷轴的工作方式和我不想的一样，但是当你将
中的y-height改为ex.3而不是2时，内容不符合希望，我解释清楚了吗？我明白你的意思。我改变了标题的设置方式，以避开另一个问题，从而保持垂直高度的灵活性。我会看一看。我解决了这个问题，标题现在具有切换幻灯片效果。如果
section.content{…}
需要灵活使用，例如
宽度：100%和<代码>高度：100%如何做到这一点？一般来说，灵活的宽度相对容易：在
部分。container
可以设置
宽度：100%
，它将基于父容器继承宽度
。列表
。高度有点复杂；它取决于
列表的高度，是否会固定？如何在页面布局中使用它？如果你能提供更多的设计细节，我们可能会更具体地帮助你。你的例子仍然有一个问题。当您按下蓝色按钮时，内容会随之向下滑动。我做这把小提琴是为了说明我的意思：现在卷轴的工作方式和我不想的一样，但是当你将
中的y-height改为ex.3而不是2时，内容不符合希望，我解释清楚了吗？我明白你的意思。我改变了标题的设置方式，以避开另一个问题，从而保持垂直高度的灵活性。我会看一看。我解决了这个问题，标题现在有了切换滑动效果。如果你将
.box\u标题的位置更改为相对，当你按下蓝色按钮时，文本内容将随着标题向下滑动，如果设置为
位置：绝对滚动时标题“跳跃”如果您在css中将
.box\u标题
的位置更改为相对位置，则按下蓝色按钮时，文本内容将随着标题向下滑动，如果设置为
位置：绝对滚动时标题“跳转”