我试图将一些文本放在具有可变高度(绝对定位)的图片下方 我尝试将其设置为“相对”，但它不会产生我真正想要的网站可变高度的效果。
CSS
header{
background-color: #f49b42;
}
body{
font-family: Lora;
margin: 0;
padding: 0;
}
img{
width: 100%;
height: auto;
clip: rect(0px,10000px,400px,0px);
position: absolute;
}
h1{
font-family: Pacifico;
margin: 0 20px;
}
p#feelgood{
position: absolute;
color: wheat;
margin: 80px 0;
text-align: center;
width: 100%;
text-shadow: 0px 1px #4c2816;
}
p{
margin: 20px;
text-align: justify;
}
span{
font-family: Pacifico;
}<body>
<header>
<h1> Music </h1>
<img src="https://images.pexels.com/photos/542515/pexels-photo-542515.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
<p id="feelgood"> makes me feel good</p>
</header>
<div class="music-quotes">
<p> One good thing about music, when it hits you, you feel no pain.<br>
<span>Bob Marley</span> </p>
<p> If music be the food of love, play on. <br><span>William Shakespeare</span></p>
<p> Where words fail, music speaks. <br><span>Hans Christian Andersen</span></p>
<p> Music is the movement of sound to reach the soul for the education of its virtue. <br><span>Plato</span>
</p>
<p>Music can change the world because it can change people. <br><span>Bono</span></p>
</div>
</body>这是我的 jsfiddle(你可能看不到绝对定位与相对定位差异的影响，因为你无法将其设置得足够宽) https://jsfiddle.net/goblincake/htgq07pb/
最佳答案
我想这就是你想要的......
https://jsfiddle.net/htgq07pb/5/
header{
background-color: #f49b42;
}
body{
font-family: Lora;
margin: 0;
padding: 0;
}
img{
width: 100%;
height: auto;
clip: rect(0px,10000px,400px,0px);
position: relative;
}
h1{
font-family: Pacifico;
margin: 0 20px;
}
p#feelgood {
position: absolute;
display: inline-block;
color: wheat;
margin: -40% 0;
text-align: center;
width: 100%;
text-shadow: 0px 1px #4c2816;
}
p{
margin: 20px;
text-align: justify;
}
span{
font-family: Pacifico;
}<body>
<header>
<h1> Music </h1>
<img src="https://images.pexels.com/photos/542515/pexels-photo-542515.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
<p id="feelgood"> makes me feel good</p>
</header>
<p> One good thing about music, when it hits you, you feel no pain.<br>
<span>Bob Marley</span></p>
<p> If music be the food of love, play on. <br><span>William Shakespeare</span></p>
<p> Where words fail, music speaks. <br><span>Hans Christian Andersen</span></p>
<p> Music is the movement of sound to reach the soul for the education of its virtue. <br><span>Plato</span>
</p>
<p>Music can change the world because it can change people. <br><span>Bono</span></p>
</body>关于css - 把div放在absolute img下面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45517001/