如何在绝对元素之后放置相对元素并导致父 div 扩展以适合子元素？
Posted
技术标签:
【中文标题】如何在绝对元素之后放置相对元素并导致父 div 扩展以适合子元素？【英文标题】：How to place a relative element after an absolute element and cause parent div to expand to fit children? 【发布时间】：2012-04-22 23:39:59 【问题描述】：我正在尝试理解 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://***.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 object 和 id top_object 定位在距顶部绝对距离的位置，就像它出现的那样。但是，我希望更多的对象 div 在顶部对象下方流动。换句话说，我想使用 top_object 为具有类对象的 div 的第一个实例定义一个绝对位置，然后让以下具有类对象的 div 自然地沿着页面向下流动，在 margin:25px; 的 @987654326 中设置 25px 边距@，跟随top_object，无需单独设置每个对象的top:XXXpx;属性。
我的第一个问题是为什么我的第二个对象出现在我的第一个对象之上，我怎样才能使relative 定位的对象在absolute 定位的对象下方流动？
第二，当不使用浮动div时，如何让背景div展开并围绕子div？
此外，我正在努力了解正在发生的事情，尽管我希望能直接回答我的问题，但我希望听到关于我所做的事情是错误的原因以及为什么任何解决方案都可以解决它的解释。我想了解 css 背后的逻辑，而不是看到解决问题的特定代码 sn-p，尽管那也很好！
【问题讨论】：
由于这不是编程问题，最好在http://webmasters.stackexchange.com/ 询问 我会挑战你重新思考你的方法。绝对定位并不像您想象的那么频繁。例如，#top_object，你为什么不让它成为相对的，顶部边距为 450 像素？为什么需要绝对定位？为什么不能是，比如float: right;，但是相对定位呢？
好的，我试过了，但它会将所有内容向下移动 450 像素。并使用 float : right 相对定位，但将所有内容向下推 450px。
【参考方案1】：
position: absolute; 将该对象完全从文档流中取出。所以它会出现在你用top: 450px 和right 或left 选择器告诉它的位置。该定位不会影响页面的任何其他元素（除非您覆盖另一个对象，如果没有z-index，肯定会发生这种情况）如果您希望将所有内容放在#top_object下方，那么您需要给它display: block;等等您需要的保证金。
另外，overflow: hidden 将切断任何超出定义宽度或高度的内容，因此您需要定义 min-width 和 min-height 然后使用 overflow: auto 而不是 hidden。
【讨论】：
以上是关于如何在绝对元素之后放置相对元素并导致父 div 扩展以适合子元素？的主要内容，如果未能解决你的问题，请参考以下文章
两个DIV，父元素相对定位没有设置高度，子元素绝对定位高度随内容变化，此无法撑开父DIV
jQuery UI (Droppable)：如果 droppable 具有相对/绝对的 css 位置，则可拖动元素不会放置在鼠标指针处