4

我正在尝试理解 css，所以我尽力使下面的实验代码尽可能通用。

我有一个简单的页面，有两个框，我希望其中一个框以某种方式定位，根据Why does setting the `right` CSS attribute push an element to left? 需要我像这样设置它的位置position:absolute但是，我现在想添加一些低于我的绝对 div 的 div，此外我希望父 div 扩展以适应子 div 的大小。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style type="text/css">
            #outer {
                position : relative;
                background-color : green;
                width : 500px;
                height : 500px;
/*                 overflow : hidden; */
/* I know from working with floating elements inside divs that this works
 *   to cause parent divs to exand out around floating children, but this
 *   does not do the same thing here, it lops off the bottom of the child divs
 *   if I un-comment the preceding line!
 */
            }

            #inner {
                position : absolute;
                background-color : blue;
                height : 400px;
                width : 400px;
                top : 10px;
                right : 20px;
            }


            #top_object {
                position : absolute;
                top : 450px;
            }

             .object {
                position : relative;
                width : 450px;
                height : 200px;
                background-color : yellow;
                margin-bottom : 25px;
            }
/*   The followsing was suggested by: 
        https://stackoverflow.com/questions/1709442/make-divs-height-expand-with-its-content 
        But has no effect!
*/
           .clear {
                clear : both;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">


            </div>
            <div id="top_object" class="object">
                Top Object
            </div>
            <div class="object">
                Second Object
            </div>
            <div class="clear"></div>
        </div>
    </body>
</html>

我想让我的第一个 div 与类对象和 id top_object 定位在与顶部绝对距离的位置，就像它出现的那样。但是，我希望更多的对象 div 在顶部对象下方流动。换句话说，我想使用 top_object 为具有类对象的 div 的第一个实例定义一个绝对位置，然后让具有类对象的以下 div 自然地沿着页面向下流动，在margin:25px;of中设置了 25px 的边距，在.objecttop_object 之后没有需要分别设置每个对象的top:XXXpx;属性。

我的第一个问题是为什么我的第二个对象出现在我的第一个对象上方，我怎样才能使relative定位的对象在定位的对象下方流动absolute？

其次，当不使用浮动 div 时，如何让背景 div 展开并围绕子 div 展开？

此外，我正在努力了解正在发生的事情，尽管对我的问题的直接回答将不胜感激，我想听听关于我所做的事情为什么是错误的以及为什么任何解决方案都可以解决它的解释。我想了解 css 背后的逻辑，而不是看到解决问题的特定代码片段，尽管那也很好！

4

1 回答 1

5

position: absolute;将该对象完全从文档流中取出。所以它会准确地出现在你用top: 450pxandright或left选择器告诉它的位置。该定位不会影响页面的任何其他元素（除非您掩盖了另一个肯定会在没有 的情况下发生的对象z-index）如果您希望将所有内容放在下方，#top_object那么您需要提供它display: block;以及您​​需要的任何边距。

此外，overflow: hidden将切断定义宽度或高度之外的任何内容，因此您需要定义 min-width 和 min-height 然后使用溢出：自动而不是隐藏。

于 2012-04-10T17:38:25.270 回答