如何将此引用块放在此图像上答案

【问题标题】：How can I put this quote block over this image如何将此引用块放在此图像上
【发布时间】：2022-04-07 10:59:41
【问题描述】：

我想在图片上加上引号，但我不知道怎么做。我尝试使用绝对定位，但它最终出现在页面顶部，而不是它的 HTML 标记所在的部分。我尝试（使用我的基本 HTML 知识）将其放置在较低的位置，但每次它要么不动，要么完全消失。

引用块

[![在此处输入图片描述][1]][1]

图片/网站下部

[![在此处输入图片描述][2]][2]

网站上半部分

[![在此处输入图像描述][3]][3] 这是我的代码：

   @import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');

        body {
            font-family: 'Playfair Display', serif;
            color: white;
            background-color: rgb(109, 107, 107);
            cursor: default;
        }

        header {
            background-color: rgb(80, 79, 79);
            padding: 30px;
            margin: -20px -8px -20px -18px;
            width: auto;
            text-align: center;
        }

        #title {
            font-size: 40px;
        }

        #image {
            border: 2px solid white;
        }

        #img-caption {
            font-style: italic;
        }

        #img-div {
            text-align: center;
        }

        #accomplishments-section {
            background-color: rgb(151, 146, 140);
            padding: 50px;
            margin: -20px -5px -20px -20px;
        }

        footer {
            text-align: center;
            background-color: rgb(228, 219, 209);
            margin: -20px -8px -20px -18px;
            padding: 15px;
            color: rgb(80, 79, 79);
        }

        #left-picture {
            width: 500px;
            height: 500px;
            position: relative;
            border-radius: 3%;
        }

        h2 {
            font-size: 30px;
        }

        p {
            font-weight: 550;
            cursor: text;
        }

        #tribute-info {
            font-size: larger;
        }

        #quote-text {
            background-color: rgb(182, 177, 170);
            padding: 30px;
            border-radius: 5px;
            position: absolute;
            left: 50%;
            top: 50%;
        }

        a {
            color: rgb(80, 79, 79);

        }

        a:hover {
            color: rgb(104, 104, 104);
        }

<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="UTF-8" />
    <title>A Malcolm X Tribute Page</title>
</head>

<body>
    <header>
        <h1 id="title">Malcolm X</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit nec orci quis facilisis. Nulla
            molestie aliquam dui non ultrices. </p>
    </header>
    <!--   <hr /> -->
    <section>
        <main id="main">
            <h2 style="margin-top: 50px;">About Malcolm</h2>
            <figure>
                <div id="img-div">
                    <img id="image"
                        src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fanswersafrica.com%2Fwp-content%2Fuploads%2F2016%2F02%2FmalcolmX.jpg&f=1&nofb=1"
                        alt="Malcolm speaking on a podium" />
                    <figcaption id="img-caption">Malcolm making a speech.</figcaption>
                </div>
            </figure>
            <p id="tribute-info" style="margin-bottom: 40px;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit commodo arcu a maximus. Sed
                volutpat imperdiet augue, eu maximus diam malesuada et. Donec ac scelerisque elit. Nunc non ex tempor
                felis auctor rhoncus. Nulla viverra ipsum ac volutpat bibendum. Aliquam bibendum lorem quam, nec
                convallis sem dictum sed. Suspendisse fermentum, sem eget suscipit rhoncus, metus lorem varius nulla, at
                tempor felis sem nec nunc. Morbi velit nulla, mollis a finibus gravida, dignissim eu nisl. Integer
                rhoncus orci id volutpat vulputate. Suspendisse semper dui eu vehicula cursus. Praesent lacus est,
                fringilla a diam eget, scelerisque dapibus eros. Maecenas velit justo, posuere et lacus id, tempor
                auctor turpis. Vestibulum finibus magna eget turpis egestas, sit amet fringilla nibh fermentum. Etiam at
                velit dolor. Praesent venenatis non dolor id gravida.
            </p>
        </main>
    </section>
    <hr />
    <section id="accomplishments-section">
        <h2>Notable Accomplishments</h2>
        <q id="quote-text"><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em></q>
        <img id="left-picture"
            src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F1200%2F1*BlFeXofPFQdHsxa8JWJZBg.jpeg&f=1&nofb=1"
            alt="" />
        <!-- separation -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    </section>
    <footer>&copy;2021 - To learn more about Malcolm, <a href="#" id="tribute-link" target="_blank"
            title="Malcolm X">visit his wiki page</a>.</footer>
</body>

</html>

【问题讨论】：

标签： html css image

【解决方案1】：

您需要在包含图像和引号的父元素上设置position: relative。然后在qoute上设置position: absolute。

div {
  position: relative;
  width: 200px;
}

p {
  position: absolute;
  background-color: lightpink;
  padding: 10px;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0;
}

<div>
  <img src="https://via.placeholder.com/200"/>
  <p>Lorem ipsum.</p>   
</div>

【讨论】：