将 div 放在绝对 img 下面答案

【问题标题】：put div underneath absolute img将 div 放在绝对 img 下面
【发布时间】：2017-08-05 09:42:03
【问题描述】：

我正在尝试在具有可变高度（绝对定位）的图片下方放置一些文本，我尝试将其设置为“相对”，但它不会产生我真正想要的可变高度的效果。

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/

【问题讨论】：

可以使用一些javascript吗？
我不是很擅长js，因为我对它很陌生，但我会尽力理解^^，所以是的
抱歉，我无法得到预期的结果，因为clip: rect(0px,10000px,400px,0px); 属性修剪了img，但不是实际高度。可能会有更有经验的人帮助你...
是this 你想要做什么
嘿，不，我实际上希望 img 保持绝对定位，但是在内容正确浮动后找不到一种方法，所以可能会坚持使用这个解决方案，干杯

标签： css image position absolute

【解决方案1】：

我想这就是你想要的......

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>

【讨论】：