如何阻止内容落后于绝对定位元素

Question

我的大部分内容都在<main>元素中：

<main>
<h1>A nice big, long, long heading</h1>
<p>Lots of text</p>
</main>

main {
max-width:200px;
margin:0 auto;
padding:0 20px;
}

h1 {
position:absolute;
max-width:300px;
padding-right:20px;
}

这实现了这个：

标题比主列宽：它从右边缘突出 - 正是我想要的。

然而，标题下方的文字显示在标题后面（因为标题已经从正常流程中取出）。

我不知道标题是一行还是两行或换行更多行。

有没有办法让标题下方的文字显示在标题下方（不在标题后面）：尊重标题的高度（就像它在正常流程中一样）？

Answer 1

喜欢这个吗？

main {
max-width: 200px;
margin: 0 auto;
padding: 0 20px;
background: blue;
height: 300px;

}

h1 {
position: relative;
width: 300px;
padding-right: 20px;
background: red;
}

<main>
<h1>A nice big, long, long heading</h1>
<p>Lots of text Lots of textLots of textLots of textLots of textLots of textLots of textLots of textLots of text</p>
</main>

Answer 2

将主要位置设置为相对位置。您可以删除h1上的最大宽度

main {
    max-width:200px;
    margin:0 auto;
    padding:0 20px;
    position: relative;
}

h1 {
    position:absolute;
    padding-right:20px;
}