Css 将div绝对放置在容器内，同时固定容器'；s在文档流中的位置

我知道一定有一个简单的解决办法，但我现在还没有找到答案

以下是我所拥有的：

我希望黄色文本块绝对位于其父容器内，距离右边缘10像素。但当我在.text块中添加“position:absolute”和“right:10px”时，会发生以下情况：

我知道我可以为父容器添加一个固定的高度，以便快速修复，但这将在一个响应站点上进行，因此父容器需要具有流体高度和宽度。这是我的密码。我做错了什么

身体{
背景色：#FFF；
字体系列：helvetica；
颜色：#333；
}
#包装纸{
填充：20px；
}
.街区{
位置：相对位置；
边框：1px实心#333；
边缘底部：10px；
填充：10px；
}
.文本块{
宽度：40%；
背景颜色：黄色；
位置：绝对位置；
右：10px；
}
标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。维塔伊·奎斯是里苏斯的维塔伊。在面部舌苔中，有一个共同的元素

标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。维塔伊·奎斯是里苏斯的维塔伊。在面部舌苔中，有一个共同的元素

标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。维塔伊·奎斯是里苏斯的维塔伊。在面部舌苔中，有一个共同的元素

绝对定位确实将其从流程中移除，因此它所做的是预期的。这里有一个使用相对定位的解决方案，另外还有一个转换，可以在不改变标记的情况下实现所需的功能。有许多不同的

文本对齐

，

浮动

，

flex

解决方案可以处理此问题

身体{
背景色：#FFF；
字体系列：helvetica；
颜色：#333；
}
#包装纸{
填充：20px；
}
.街区{
位置：相对位置；
边框：1px实心#333；
边缘底部：10px；
填充：10px；
}
.文本块{
宽度：40%；
背景颜色：黄色；
位置：相对位置；
左：100%；
转换：转换（-100%，0%）；
-webkit转换：翻译（-100%，0%）；
}
标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。维塔伊·奎斯是里苏斯的维塔伊。在面部舌苔中，有一个共同的元素

标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。维塔伊·奎斯是里苏斯的维塔伊。在面部舌苔中，有一个共同的元素

标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。维塔伊·奎斯是里苏斯的维塔伊。在面部舌苔中，有一个共同的元素

绝对定位的元素不会影响父容器高度

您需要使用Javascript来更改高度，作为此行为的解决方法（或者，使用相对定位）

---

答案就在这里：

我认为您在这里滥用了绝对位置-它旨在“剪切”页面流中的内容，并将其放在其他地方。尝试使用float:right或relative positioning。我的意思是黄色框的右边缘应该距离父容器的右边缘10px。我不熟悉变换风格；大多数浏览器都支持吗？这真的是最简单的方法吗？您的方法使黄色框的左边缘与父容器的右边缘相距10px，使大多数黄色框溢出。它看起来像是从100%向左改变：60%就可以了；我会做更多的测试。谢谢你的帮助！可能您使用的任何浏览器都不支持我可以转换的浏览器前缀。定义了40%的宽度后，

left:60%

也可以工作。这个解决方案应该适用于任何现代浏览器（ie-8不起作用），但您可能需要一些浏览器前缀。啊！我只需要将-webkit-添加到您的原始规则中，以使其在Safari中工作。知道了。

$(document).ready(function() {
    var objHeight = 0;
    $.each($('.block').children(), function(){
        objHeight += $(this).height();
    });
    $('.block').height(objHeight);
});​