How can I put this quote block over this image-CodePudding

I want to put a quote block over an image, but I don't know how. I tried using absolute positioning but it ends up at the top of the page instead of the section the HTML tag of it is on. I tried (using my basic HTML knowledge) to position it lower but, every time it either doesn't move or it just disappears completely.

quote block

image/lower section of website

upper section of website

Here's my code:

   @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://answersafrica.com/wp-content/uploads/2016/02/malcolmX.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://cdn-images-1.medium.com/max/1200/1*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>

CodePudding user response：

You need to set position: relative on the parent element that contains the image and the quote. Then set position: absolute on the qoute.

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>