我想在影像上加上引號，但我不知道怎么做。我嘗試使用絕對定位，但它最終位于頁面頂部，而不是它的 HTML 標記所在的部分。我嘗試（使用我的基本 HTML 知識）將它定位得更低，但是，每次它要么不動，要么完全消失。
報價塊
圖片/網站下部
網站的上半部分
這是我的代碼：
@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>©2021 - To learn more about Malcolm, <a href="#" id="tribute-link" target="_blank"
title="Malcolm X">visit his wiki page</a>.</footer>
</body>
</html>uj5u.com熱心網友回復：
您需要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;
}<div>
<img src="https://via.placeholder.com/200"/>
<p>Lorem ipsum.</p>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/334676.html
下一篇：SimpleITK無法顯示影像