如何在绝对元素之后放置相对元素并使父div扩展以适合孩子? [英] How to place a relative element after an absolute element and cause parent div to expand to fit children?
问题描述
我试图了解CSS，所以我尽力使下面的实验代码尽可能通用.
I'm trying to understand css, so I tried my best to make my experimental code below as generic as possible.
I have a simple page, with two boxes, I wanted one of the boxes to be positioned a certain way which according to Why does setting the `right` CSS attribute push an element to the left? requires me to set its position like so position:absolute However, I now want to add some divs which fall below my absolute div, furthermore I would like the parent div to expand to fit the size of the child divs.
<!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自然顺着页面向下流动，在.object的margin:25px;中设置25px的边距>，在top_object之后，而无需分别设置每个对象的top:XXXpx;属性.
I would like to have my first div with class object and id top_object positioned at an absolute distance from the top like it appears. However, I would then like further object divs to flow below top object. In other words I want to use top_object to define an absolute position for the first instance of div with class object and then have the following divs with class object naturally flow down the page, with a 25px margin as set in margin:25px; of .object, following top_object without the need to set each object's top:XXXpx; attribute separately.
我的第一个问题是，为什么我的第二个对象出现在我的第一个对象上方，并且如何使relative定位的对象流到absolute定位的对象下方?
My first question is why does my second object appear above my first object, and how can I cause relative positioned objects to flow below an absolute positioned object?
第二，当不使用浮动div时，如何使背景div展开并围绕子div?
Second how do I get background div to expand and around the children divs when floating divs are not used?
此外，我正在努力了解正在发生的事情，尽管希望能直接回答我的问题，但我还是想听听为什么我做错了什么以及为什么任何解决方案都可以解决这一问题的解释.我想了解CSS背后的逻辑，而不是看能解决问题的特定代码片段，尽管那也很好！
Furthermore, I am working to understand what is happening, although a direct answer to my question would be appreciated I would like to hear an explanation as to why what I am doing is wrong, and why any solution would fix it. I want to understand the logic behind css, not so much to see a specific code snippet which fixes the issue, although that would be nice too!
推荐答案
position: absolute;将该对象完全从文档流中移出.因此，它将准确显示在您使用top: 450px和right或left选择器告诉它的位置.该定位不会影响页面的任何其他元素(除非您掩盖了另一个对象，而该对象肯定会在没有z-index的情况下发生).如果要将所有内容放置在#top_object下，则只需将其左右浮动即可然后给它任何您需要定位的边距.
position: absolute; takes that object completely out of the document flow. So it's going to appear exactly where you tell it to be with your top: 450px and right or left selectors. That positioning won't effect any other element of your page (unless you cover up another object which will definitely happen without z-index) If you want everything to be placed below #top_object then you need to just float it right or left and then give it whatever margin you need to position it.
此外，overflow: hidden将剪切超出定义的宽度或高度的任何内容，因此您需要定义min-width和min-height，然后使用overflow:auto而不是hidden.
Also, overflow: hidden will cut off anything that is outside the defined width or height so you need to define min-width and min-height and then use overflow: auto instead of hidden.
这篇关于如何在绝对元素之后放置相对元素并使父div扩展以适合孩子?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
