Question

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

我有一个简单的页面，有两个方框，我希望其中一个方框按照某种方式定位，根据Why does setting the `right` CSS attribute push an element to the 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与class对象和id top_object定位在距离顶部绝对距离处。但是，我希望进一步的对象div在顶层对象下方流动。换句话说，我想使用top_object来定义具有类对象的div的第一个实例的绝对位置，然后让具有类对象的以下div自然地向下流动页面，并在margin:25px;中设置25px的边距.object，在top_object之后，无需单独设置每个对象的top:XXXpx;属性。

我的第一个问题是为什么我的第二个对象出现在我的第一个对象上方，以及如何让relative个定位对象在absolute个定位对象下方流动？

其次，如果不使用浮动div，我如何让背景div扩展并围绕子div？

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

Answer 1

position: absolute;将该对象完全从文档流中取出。因此，它会准确显示在您top: 450px和right或left选择器的位置。这个定位不会影响你页面的任何其他元素（除非你掩盖了另一个肯定会在没有z-index的情况下发生的对象）如果你想把所有东西都放在#top_object之下那么你需要漂浮它向右或向左，然后给它定位它所需的任何余量。

此外，overflow: hidden将切断超出定义宽度或高度的任何内容，因此您需要定义最小宽度和最小高度，然后使用overflow：auto而不是隐藏。

如何在绝对元素之后放置一个相对元素并导致父div扩展以适合孩子？

1 个答案: