如何仅使用CSS将Div固定到页面顶部
如何仅使用CSS将Div固定到页面顶部
提问于 2011-07-22 14:40:24
我正在写一个词汇表页面。我在页面顶部有字母表链接。我想保持页面顶部(包括字母表链接)的固定，而与定义的页面部分，滚动向上/向下作为一个字母表被点击。
我的HTML看起来有点像这样：
<html>
<head><title>My Glossary</title></head>
<body>
<div id="top">
<a href="#A">A</a> |
<a href="#B">B</a> |
<a href="#Z">Z</a>
</div>
<div id="term-defs">
<dl>
<span id="A"></span>
<dt>foo</dt>
<dd>This is the sound made by a fool</dd>
<!-- and so on ... -->
</dl>
</div>
</body>
</html>编辑
我试图创造的效果类似于here的效果。不同之处在于，在链接的示例中，页面滚动是在用户单击某个类别时完成的。在我的例子中，我希望在页面顶部的索引(即字母表)被单击时滚动页面。
回答 4
Stack Overflow用户
发布于 2011-07-22 14:42:51
是的，有很多方法可以做到这一点。“最快”的方法是将CSS添加到div中，如下所示
#term-defs {
height: 300px;
overflow: scroll;
}这将强制div是可滚动的，但这可能不会获得最佳效果。另一种方法是绝对固定顶部项目的位置，你可以这样做。
#top {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 23px;
}这将把它固定在顶部，在其他高度为23px的内容之上。
最终的实现将取决于您真正想要的效果。
Stack Overflow用户
发布于 2011-07-22 14:53:22
你可以这样做：
<html>
<head><title>My Glossary</title></head>
<body style="margin:0px;">
<div id="top" style="position:fixed;background:white;width:100%;">
<a href="#A">A</a> |
<a href="#B">B</a> |
<a href="#Z">Z</a>
</div>
<div id="term-defs" style="padding-top:1em;">
<dl>
<span id="A"></span>
<dt>foo</dt>
<dd>This is the sound made by a fool</dd>
<!-- and so on ... ->
</dl>
</div>
</body>
</html>最重要的是position:fixed，因为它从正常页面流中取出顶部div，并将其固定在预定位置。使用padding-top:1em也很重要，因为否则术语-defs div就会在top div下面开始。background和width用于覆盖term-defs div的内容，因为它们滚动到顶部div下。
希望这能有所帮助。
Stack Overflow用户
发布于 2011-07-22 14:43:38
你可以简单的固定顶部的div：
#top { position: fixed; top: 20px; left: 20px; }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6786511
复制相关文章
相似问题