将 div 绝对定位在容器内，同时保留容器在文档流中的位置答案

【问题标题】：Absolutely position div inside container while retaining the container's position in document flow将 div 绝对定位在容器内，同时保留容器在文档流中的位置
【发布时间】：2015-05-05 01:44:19
【问题描述】：

我知道必须有一个简单的解决方案，但我现在正在画一个空白。

这是我所拥有的：

我希望黄色文本块绝对位于其父容器内，距右边缘 10 个像素。但是当我将“position:absolute”和“right:10px”添加到 .text-block 时，会发生这种情况：

我知道我可以将固定高度添加到父容器以进行快速修复，但这将在响应式站点上，因此父容器需要具有可变的高度和宽度。这是我的代码。我做错了什么？

<!doctype html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8" />
		
		<style type="text/css">
			body {
				background-color: #FFF;
				font-family: helvetica;
				color: #333;
			}
			
			#wrapper {
				padding: 20px;
			}
			
			.block {
				position: relative;
				border: 1px solid #333;
				margin-bottom: 10px;
				padding: 10px;
			}
			
			.text-block {
				width: 40%;
				background-color: yellow;
				position: absolute;
				right: 10px;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div class="block">
				<h2>Heading</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
			</div> <!-- block -->
			
			<div class="block">
				<div class="text-block">
					<h2>Heading</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
				</div> <!-- text-block -->
			</div> <!-- block -->
			
			<div class="block">
				<h2>Heading</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
			</div> <!-- block -->
		</div> <!-- wrapper -->
	</body>
</html>

【问题讨论】：

我认为您在这里滥用了绝对位置-它旨在将内容从页面流中“剪切”出来并将其放在其他地方。尝试使用 float:right 或相对定位。

标签： css absolute

【解决方案1】：

绝对定位确实使它脱离了流程，所以它正在做的事情是意料之中的。这是一个使用相对定位的解决方案，加上一个变换来实现你想要的，而不需要更改标记。有很多方法可以使用不同的text-align、float、flex 解决方案来处理这个问题。

<!doctype html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8" />
		
		<style type="text/css">
			body {
				background-color: #FFF;
				font-family: helvetica;
				color: #333;
			}
			
			#wrapper {
				padding: 20px;
			}
			
			.block {
				position: relative;
				border: 1px solid #333;
				margin-bottom: 10px;
				padding: 10px;
			}
			
			.text-block {
				width: 40%;
				background-color: yellow;
				position: relative;
				left: 100%;
                transform:translate(-100%, 0%);
                -webkit-transform:translate(-100%, 0%);
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div class="block">
				<h2>Heading</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
			</div> <!-- block -->
			
			<div class="block">
				<div class="text-block">
					<h2>Heading</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
				</div> <!-- text-block -->
			</div> <!-- block -->
			
			<div class="block">
				<h2>Heading</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
			</div> <!-- block -->
		</div> <!-- wrapper -->
	</body>
</html>

【讨论】：

我的意思是黄色框的右边缘应该距离父容器的右边缘10px。我不熟悉变换风格；大多数浏览器都支持吗？这真的是最简单的方法吗？
Yours 使黄色框的左边缘距离父容器的右边缘 10px，使大部分黄色框溢出。看起来将 left:100% 改为 left:60% 就可以了。
所以无论如何，这似乎在 Safari 中运行良好；我会再做一些测试。感谢您的帮助！
也许您使用的任何浏览器都不支持我可以转换的浏览器前缀。使用定义的 40% 宽度，left:60% 也应该可以工作。该解决方案应该适用于任何现代浏览器（ie-8 将不起作用），但您可能需要一些浏览器前缀。
啊！我只需要将 -webkit- 添加到您的原始规则中即可使其在 Safari 中运行。明白了。

【解决方案2】：

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

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

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

这个答案来自这里：https://stackoverflow.com/a/8185521/722617

【讨论】：