Question

我在网站上搜索了这个问题的答案，而且从我看到的情况来看，其他问题不涉及使用div的父position:absolute;

这是我的代码：

<div id="wrapper">

    <div id="child">
    Here are the contents to be displayed.
    </div>

</div>

这是我的CSS：

#wrapper {width:1024px; height:auto; position:absolute; top:0px; left:0px; border:solid 1px #000;}

#child {width:500px; height:1000px; position:absolute; top:35px; left:15px; border:solid 1px #FF0000;}

这是一个小提琴：jsfiddle

Answer 1

如果父母不能是亲戚，那么孩子必须是亲戚（你将获得相同的行为）。如果两者都是绝对的，则它们不相关，因此父母不能适应孩子（反之亦然）。您还必须向父级添加padding-bottom以修补子级的完整大小（至少是子级的顶部+您想要的任何填充）

更新了例子：http://jsfiddle.net/aEbFv/8/

#wrapper {
    ....
    padding-bottom: 60px; /* 35px from childs top + 25px for padding */
}
#child {
    ....
    position:relative;
}

Answer 2

现在给

    #wrapper{
position:relative;
position:absolute; // remove this line
}
    .child{
    position:absolute;
    left:0;
    right:0;
    width:500px; // remove this line
    }

总是在position relative

给予父div absolute和子div

更多 about position

如何在使用绝对定位的子div时扩展绝对定位的包装div？

2 个答案: