绝对位置溢出答案

【问题标题】：overflow with position absolute绝对位置溢出
【发布时间】：2013-06-12 09:41:14
【问题描述】：

我有一个div，里面有另一个div。第二个div 有width、height 和background-color: green。这个有绝对位置，所以它的容器没有显示出来。

<div id="root">

<div id="r1">

    <div id="r2">

    </div>
</div>
Mas
</div>

CSS 文件

#root{
width:300px;
background-color: red;
}

#r1{

position: relative;
width: 100px;
background: yellow;

}

#r2{
position: absolute;
display: inline-block;
width: 50px;
height: 50px;
left: 0;
background-color: green;
}

http://jsfiddle.net/sev2E/1/

我想知道是否有可能显示它的容器并用绝对位置包裹div。

我想看到这样的东西，但不使用相对位置，也不给容器增加高度。

http://jsfiddle.net/sev2E/2/

谢谢！

【问题讨论】：

请在您的问题中也包含相关代码。
当你声明一个 div 为绝对的，那么它就不会包含在父标签中。所以无法根据需要进行包装。
`不使用相对位置且不添加高度`？有什么原因吗？
@zey 是的，我想在 CSS 中找到与 Android 布局中的“WRAP_CONTENT”属性类似的方法...谢谢大家！

标签： html css

【解决方案1】：

为你的 r1 css 增加一些高度

#r1{

    position: relative;
    width: 100px;
    background: yellow;
    height:60px;

或添加一个 padding-bottom:"height of your div" 这是相同的

#r1{

    position: relative;
    width: 100px;
    background: yellow;
    padding-bottom:55px

}

【讨论】：

我想知道我是否可以在不增加容器高度的情况下做到这一点......我更新了我的问题，我这样说。感谢您的回答！
我认为通过给你的对象位置绝对，你让你的 div 有点“空”，这就是为什么它得到高度 0

【解决方案2】：

简短的回答是否定的。

一旦你对一个元素进行绝对定位，它就会从文档流中取出，并且不再考虑计算其包含块的高度或宽度。

Android API（用 Java 编写）使用的文本格式化模型与现代浏览器实现的 CSS 兼容的不同。

要在基于 CSS 的网页和 Android 界面布局之间获得相似的视觉效果，您需要根据所使用的每种语言的规则和约束对每个实现进行编码。

Pumpkinpro 的回答本质上是在 CSS 中获得“wrap_content”效果的方法。

【讨论】：

谢谢！好吧...我将不得不更改我的 java 代码以使用 CSS 模型而不是 android 模型 T_T