#html #css #image
Вопрос:
Я хочу поместить блок цитат поверх изображения, но я не знаю, как это сделать. Я попытался использовать абсолютное позиционирование, но оно оказывается в верхней части страницы, а не в разделе, на котором находится HTML-тег. Я пытался (используя свои базовые знания HTML) расположить его ниже, но каждый раз он либо не двигается, либо просто полностью исчезает.
блок цитат
изображение/нижний раздел веб-сайта
верхний раздел веб-сайта
Вот мой код:
@import url('https://fonts.googleapis.com/css2?family=Playfair Displayamp;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); } lt;!DOCTYPE htmlgt; lt;html lang="en-us"gt; lt;headgt; lt;meta charset="UTF-8" /gt; lt;titlegt;A Malcolm X Tribute Pagelt;/titlegt; lt;/headgt; lt;bodygt; lt;headergt; lt;h1 id="title"gt;Malcolm Xlt;/h1gt; lt;pgt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit nec orci quis facilisis. Nulla molestie aliquam dui non ultrices. lt;/pgt; lt;/headergt; lt;!-- lt;hr /gt; --gt; lt;sectiongt; lt;main id="main"gt; lt;h2 style="margin-top: 50px;"gt;About Malcolmlt;/h2gt; lt;figuregt; lt;div id="img-div"gt; lt;img id="image" src="https://external-content.duckduckgo.com/iu/?u=https://answersafrica.com/wp-content/uploads/2016/02/malcolmX.jpgamp;f=1amp;nofb=1" alt="Malcolm speaking on a podium" /gt; lt;figcaption id="img-caption"gt;Malcolm making a speech.lt;/figcaptiongt; lt;/divgt; lt;/figuregt; lt;p id="tribute-info" style="margin-bottom: 40px;"gt; 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. lt;/pgt; lt;/maingt; lt;/sectiongt; lt;hr /gt; lt;section id="accomplishments-section"gt; lt;h2gt;Notable Accomplishmentslt;/h2gt; lt;q id="quote-text"gt;lt;emgt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.lt;/emgt;lt;/qgt; lt;img id="left-picture" src="https://external-content.duckduckgo.com/iu/?u=https://cdn-images-1.medium.com/max/1200/1*BlFeXofPFQdHsxa8JWJZBg.jpegamp;f=1amp;nofb=1" alt="" /gt; lt;!-- separation --gt; lt;pgt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.lt;/pgt; lt;pgt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.lt;/pgt; lt;pgt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.lt;/pgt; lt;pgt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.lt;/pgt; lt;pgt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.lt;/pgt; lt;pgt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.lt;/pgt; lt;pgt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.lt;/pgt; lt;/sectiongt; lt;footergt;amp;copy;2021 - To learn more about Malcolm, lt;a href="#" id="tribute-link" target="_blank" title="Malcolm X"gt;visit his wiki pagelt;/agt;.lt;/footergt; lt;/bodygt; lt;/htmlgt; Ответ №1:
Вам нужно установить position: relative родительский элемент, содержащий изображение и цитату. Затем установите position: absolute на qoute.
div { position: relative; width: 200px; } p { position: absolute; background-color: lightpink; padding: 10px; top: 50%; left: 0; right: 0; margin: 0; } lt;divgt; lt;img src="https://via.placeholder.com/200"/gt; lt;pgt;Lorem ipsum.lt;/pgt; lt;/divgt;