CSS定位固定限制在一个div内部

Question

CSS定位固定限制在一个div内部

htmlcss

5

我有一个小的工具栏div，它的position属性为fixed，因此随着用户滚动而移动。工具栏在一个更大的div中，但是我需要工具栏不要滚出父div - 有没有办法做到这一点？

如果你不明白我的意思，请看一下这个链接：http://flowmainserver.appspot.com/post（我希望爱心和其他按钮不要滚出大图像div，因为它们会遮挡评论框）

是否有一种方法可以使用CSS实现这一点，或者我需要JavaScript？

谢谢！

- N S

1

你绝对需要 Javascript。 - Yi Jiang

2个回答

1

请在小工具栏 div 后面放置一个 <div style="clear:both"></div>。它应该浮动在父 div 内。

希望这有所帮助，

- Ramon Araujo

嗯，似乎没有起作用。你所说的小工具栏右边是指哪里？ - N S

<div class="commentTab" onclick="$(window).scrollTo( $('#commentBoxTitle'), 380 ); $('#commentBox').focus();" title="Comments">Ξ&nbsp;</div><div style="clear:both"></div>

就像这样。 - Kyle

似乎仍然无法正常工作，如果您想亲自查看，我已经更新了它http://flowmainserver.appspot.com/post - N S

1

我是古巴人。不允许进入那个网站。我的意思是在小工具div的</div>闭合标签之后。 - Ramon Araujo

如果父级div也不应该移动，为什么不在父级div上使用相同的position:fixed呢？ - Ramon Araujo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Richard JP Le Guen · Accepted Answer

首先，其他一些要点：

使用<!DOCTYPE>声明。（使用不同的<!DOCTYPE>声明可能需要您进行一些更改，包括将cellspacing="0" cellpadding="0"添加到<table>标记中）
不要使用<center>元素 - 而是使用margin:auto和text-align:center;的组合。
不要将块级元素<div>放在内联级元素<a>中，如下所示：<a href="/"><div class="title"></div></a>。相反，给您的<a>一个display:block;的CSS属性。
...当您为文本使用图像时，也请在HTML源代码中包含该文本，但使用CSS text-indent:-10000px;将其移除。
不要混合XHTML语法和HTML语法！您有时会关闭空标签 - <link /> - 有时不会<img>。选择其中之一，并使用适当的<!DOCTYPE>
完成所有这些后，您可能也会将alt属性添加到<img />标记上，并将rows和cols添加到<textarea>标记上，以验证您的HTML文档。

这将导致浏览器之间的行为更加一致，并提高可访问性。添加一些<h1>...<h6>标题，您的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">&nbsp;2 weeks ago by @<a href="#" class="categoryTitleByA">author url</a></span></p>
            <div class="postDescription"></div>
            <div class="heartOff" title="Click to heart">&hearts;</div>
            <div class="commentTab" onclick="$(window).scrollTo( $('#commentBoxTitle'), 380 ); $('#commentBox').focus();" title="Comments">&Xi;&nbsp;</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>