我正在嘗試在左中部制作帶有標題的影像。標題應始終位于影像的左中或左側的任何位置，并且其大小應同時隨瀏覽器大小而變化。問題是當我調整視窗大小時，標題的大小不會改變，并且它的位置也不是固定的影像。
.page-overview{
width: 100%;
border: 1px solid black;
}
.overview-content img{
width: 100%;
}
.caption{
position: absolute;
top: 20%;
left: 18px;
font-size: 80%;
font-family: 'Source Sans Pro', sans-serif;
z-index: 1;
}
.caption span{
display: block;
margin: 8px 0;
padding: 10px 17px;
border-radius: 3px;
background-color: #00000033;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test YOU</title>
</head>
<body>
<!--Here can have other content too-->
<div class="page-overview">
<div class="overview-content"><a href="#"><img src="https://images5.alphacoders.com/481/481903.png" alt="Delilious & Yum" height="auto"></a>
<div class="caption">
<span>Test your best here</span>
<span>It's Yum ??</span>
</div>
</div>
</div>uj5u.com熱心網友回復：
洗掉position: absolute;并改用相對。absolute不會考慮瀏覽器收縮，它仍然會停留在指定區域。
.page-overview {
width: 100%;
border: 1px solid black;
}
.overview-content img {
width: 100%;
}
.caption {
position: relative;
width: fit-content;
margin: auto 0;
top: 20%;
left: 18px;
font-size: 80%;
font-family: 'Source Sans Pro', sans-serif;
z-index: 1;
}
.caption span {
display: block;
margin: 8px 0;
padding: 10px 17px;
border-radius: 3px;
background-color: #00000033;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test YOU</title>
</head>
<body>
<!--Here can have other content too-->
<div class="page-overview">
<div class="overview-content">
<a href="#"><img src="https://images5.alphacoders.com/481/481903.png" alt="Delilious & Yum" height="auto"></a>
<div class="caption">
<span>Test your best here</span>
<span>It's Yum ??</span>
</div>
</div>
</div>uj5u.com熱心網友回復：
position:absolute最主要的是用div包裝position:relativediv，因此絕對 div 將相對于該父級。除此之外，我還使用了 flexbox 來使內容居中。那是假設您想要影像上的標題...
.page-overview{
width: 100%;
border: 1px solid black;
}
.overview-content img{
width: 100%;
}
.caption{
position: absolute;
top: 20%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
font-size: 80%;
font-family: 'Source Sans Pro', sans-serif;
z-index: 1;
}
.caption span{
display: block;
margin: 8px 0;
padding: 10px 17px;
border-radius: 3px;
background-color: #00000033;
}
.image-wrapper {
position: relative;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test YOU</title>
</head>
<body>
<!--Here can have other content too-->
<div class="page-overview">
<div class="overview-content">
<div class="image-wrapper">
<a href="#">
<img src="https://images5.alphacoders.com/481/481903.png" alt="Delilious & Yum" height="auto"/>
</a>
<div class="caption">
<span>Test your best here</span>
<span>It's Yum ??</span>
</div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/441404.html