logo标签列表

如何在绝对定位元素后面放置相对定位元素并使父级div扩展以适应子元素？

csshtmlpositioning
4
我正在努力理解CSS，因此我尽力使下面的实验代码尽可能通用。
我有一个简单的页面，有两个盒子，我想让其中一个盒子以某种方式定位，根据为什么设置“right”CSS属性会将元素推到左侧？需要我像这样设置其位置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://dev59.com/d3I-5IYBdhLWcg3wta_w 
        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>

我希望我的第一个class为object，id为top_object的div能够绝对定位到页面顶部。但随后出现的其他class为object的div需要自然地流动到top_object下面。换句话说，我想使用top_object来定义class为object的第一个div的绝对位置，然后让其后的div们在不需要单独设置每个object的top:XXXpx;属性的情况下，紧跟着top_object从而自然地向下流动，且保持25像素的外边距（即.object中设置的margin:25px;）。
我的第一个问题是为什么我的第二个object出现在第一个object上方？如何使class为relative的div在class为absolute的div下面流动？
其次，如何在不使用浮动的情况下使背景div围绕子div扩展？
此外，我正在努力理解发生了什么。虽然直接回答我的问题将不胜感激，但我想听一下为什么我的方法是错误的，以及为什么任何解决方案都会修复它。我想理解CSS背后的逻辑，而不仅仅是看到特定的代码片段来解决问题，尽管这也很好！
由于这不是一个编程问题，最好在http://webmasters.stackexchange.com/上提问。 - Peter Rowell
我想挑战你重新思考你的方法。绝对定位并不像你想象的那样经常需要使用。例如，对于#top_object，为什么不将其设为相对定位，并设置一个450像素的上边距？而且为什么你需要将内部元素绝对定位呢？为什么不能将其设置为float:right;，但相对定位呢？ - random_user_name
好的，我尝试过了，但它将所有内容向下移动了450像素。使用相对定位的float:right也会将所有内容向下推450像素。 - john-charles
1个回答
5

position: absolute;会将对象完全从文档流中移除。因此，它将准确地出现在您用top: 450px和right或 left选择器指定的位置。这种定位不会影响页面上的任何其他元素（除非您遮盖了另一个对象，否则一定会发生，除非使用z-index）。如果您希望所有内容都放置在#top_object下方，则需要给它添加display:block;以及所需的任何边距。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接