如果我必須使用絕對位置將背景圖片和矢量的圖片保持在頁面頂部，但是當我調整視窗大小時，即使背景圖片縮小，矢量也會保持在同一位置。有沒有辦法讓頁面頂部和矢量保持與背景影像的相對位置相同，并讓它們一起增長和縮小？ 他們現在縮小后的樣子和我想要的
CSS：
.landingImage {
z-index: 0;
background-size: fill;
background-size: 100vw 100vh;
top: 0;
padding: 0;
display: grid;
width: 100%vw;
max-height: 944px;
}
.landingText {
position: absolute;
z-index: 0;
background-color: black;
color: white;
text-align: left;
align-items: left;
margin-top: 200px;
margin-left: 100px;
top: 0;
}
.wrapper {
position: absolute;
z-index: 0;
margin-top: 500px;
margin-left: 500px;
top: 0;
}
.vector{
}
HTML：
<Image className={indexStyles.landingImage} src={orcas} />
<div className={indexStyles.wrapper}>
<Image className={indexStyles.vector} src={vector} />
</div>
uj5u.com熱心網友回復：
我的片段是您問題的解決方案嗎？我不完全確定我是否理解它。
如果我這樣做了：為您的印象和矢量創建一個容器，并確保將容器設定為position: relative;. 然后給印象的寬度為 100%。給出向量 aposition: absolute;并計算如何將它定位在中間以及與容器底部的距離應該是多少。
.landing{
position: relative;
}
.impression{
width: 100%;
height: 100px; /* auto or remove this */
border: solid 1px black; /* remove this */
}
.vector{
width: 5vw;
height: 5vw; /* auto, remove or unit like this: if you want to scale it use same unit (vw) as width */
border: solid 1px black; /* remove this */
position: absolute;
bottom: 10%;
left: calc((100% - 5vw) / 2);
}<nav>
<button>example</button>
</nav>
<div class="landing">
<img class="impression" src="orcas.jpg">
<img class="vector" src="vector.svg">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/415767.html
標籤：