我有一个小的工具栏 div，它的位置是固定的，所以它会随着用户滚动而移动。工具栏位于一个较大的 div 内，但是我需要工具栏不滚动出父 div - 有什么办法可以做到这一点吗？
如果你不明白我的意思，看看:http://flowmainserver.appspot.com/post (我希望爱心和其他按钮不会滚动到大图像 div 之外，因为它们会挡住评论框)
有什么方法可以用 css 实现吗？我需要 javascript 吗？ 谢谢!
最佳答案
首先，一些其他的指针:
- 使用
<!DOCTYPE>声明。 (使用不同的<!DOCTYPE>声明可能需要您进行一些更改，包括将cellspacing="0" cellpadding="0"添加到<table>标签) - 不要使用
<center>元素 - 而是使用margin:auto的组合和text-align:center;. - 不要放置 block 级元素
<div>在内联级别元素内<a>像这样:<a href="/"><div class="title"></div></a>.相反，请提供您的<a>一个display:block;CSS 属性。 - ... 当你使用 image for text 时还在 HTML 源代码中包含该文本，但使用 CSS
text-indent:-10000px;将其删除。 - 不要混合使用 XHTML 语法和 HTML 语法!您有时会关闭空标签 -
<link />- 有时不<img>.选择一个或另一个，并使用适当的<!DOCTYPE> - 完成所有这些操作后，您不妨输入
alt<img />上的属性标签和rows和cols在<textarea>标记来验证您的 HTML 文档。
这将导致浏览器之间的行为更加一致，并具有更好的可访问性。加入一些<h1> ... <h6> headers 是你在 SEO 方面也很扎实。
切入点
至于你的问题......也许你只是让它在评论后面？
把它放在 .html 中文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<base href="http://flowmainserver.appspot.com/" /> <!-- remove this when you put it online -->
<!-- Copyright Cal Smith 2010 $(window).height()-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript">$(window)._scrollable();</script>
<link href="buttons.css" media="all" rel="stylesheet" type="text/css" />
<link href="main.css" media="all" rel="stylesheet" type="text/css" id="main_css" />
<title>flow | post title</title>
<script type="text/javascript">/*
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
document.location = "http://www.google.com";
}
});
*/</script>
<style type="text/css">
html body {
text-align:center;
}
html body div.pageHolder {
margin:auto;
}
html body a.title {
text-indent:-10000px;
display:block;
}
html body table {
position:relative;
z-index:10;
background:url(imgs/dark_bg.png) repeat;
}
html body table table td {
padding-bottom:5px;
}
</style>
</head>
<body>
<div class="pageHolder" style="margin:auto;">
<a href="/" class="title">Flow</a>
<div class="directory">
<p class="categoryTitle">Post title<span class="categoryTitleBy"> 2 weeks ago by @<a href="#" class="categoryTitleByA">author url</a></span></p>
<div class="postDescription"></div>
<div class="heartOff" title="Click to heart">♥</div>
<div class="commentTab" onclick="$(window).scrollTo( $('#commentBoxTitle'), 380 ); $('#commentBox').focus();" title="Comments">Ξ </div>
<div class="postFull" style="background-image: url(example_full.png); height: 500px; width: 1300px;"></div>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<span class="commentBoxTitle" id="commentBoxTitle">Comment</span>
<textarea id="commentBox" class="commentBox"></textarea>
<div align="right"><div class="commentPostButton">Post</div></div>
</td>
<td>
<div class="commentsHolder">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><img src="http://s3.amazonaws.com/forrst-production/users/photos/10587/xl.png?1280926926" class="commentUserPic" /></td>
<td><div class="commentBody">Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</div></td>
</tr>
<tr>
<td valign="top"><img src="http://s3.amazonaws.com/forrst-production/users/photos/7825/xl.png?1278955396" class="commentUserPic" /></td>
<td><div class="commentBody">Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus.</div></td>
</tr>
<tr>
<td valign="top"><img src="http://s3.amazonaws.com/forrst-production/users/photos/10587/xl.png?1280926926" class="commentUserPic" /></td>
<td><div class="commentBody">Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</div></td>
</tr>
<tr>
<td valign="top"><img src="http://s3.amazonaws.com/forrst-production/users/photos/7825/xl.png?1278955396" class="commentUserPic" /></td>
<td><div class="commentBody">Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus.</div></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<div class="footer">created by cal smith</div>
</div>
</div>
</body>
</html>
关于html - CSS Position 固定限制在 div 内，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3584397/