Question

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

这就是我所拥有的：

Before

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

After

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

<!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>

Answer 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>

Answer 2

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

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

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

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

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

2 个答案: