我知道必须有一个简单的解决方案，但我现在一片空白。
这是我所拥有的:
我希望黄色文本 block 绝对定位在其父容器内，距右边缘 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>最佳答案
绝对定位确实将其从流中移除，因此它的作用是意料之中的。这是一个使用相对定位的解决方案，加上一个转换来实现你想要的而不改变标记。有许多不同的 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>关于css - 将 div 绝对定位在容器内，同时保持容器在文档流中的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30036238/