我正在嘗試將一個影像放置在另一個影像之上，但是當我使用 position: absolute 和 z-index 成功完成它時，結果沒有回應，并且當媒體螢屏變小時它會在另一個部分的頂部/后面而不是擴展其 div。我已經嘗試了很多方法，但它似乎把頁面弄亂了。關于如何解決這個問題的任何建議？
這是我想要達到的結果。
這就是問題
當我嘗試將寬度設定為 100% 以便回應時它也會破壞頁面但如果我不這樣做，原始影像檔案的大小對于某些設備來說太大了
.container-home-about {
padding-top: 65px;
padding-bottom: 65px;
}
.row {
height: 100%;
}
.about-content>p {
font-size: 16px;
font-weight: 400;
color: #5d77aa;
}
.about-image {
position: relative;
}
.img-bottom {
position: relative;
z-index: 0;
top: 0;
left: 0;
}
.img-top {
position: absolute;
z-index: 1;
top: 80px;
left: 75px;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<div class="home home-about">
<div class="container container-home-about">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 left">
<div class="about-content">
<p style="max-width: 520px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 right">
<div class="about-image">
<img src="https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" class="img-bottom">
<img src="https://images.unsplash.com/photo-1500630417200-63156e226754?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="" class="img-top">
</div>
</div>
</div>
</div>
</div>
<div class="home home-partner" style="border-top: 1px solid #EAEAEA;">
<div class="container container-home-partner">
<div class="col-xl-3 col-lg-4 col-md-4 partner-title">
<div class="title" style="z-index: 9;">World class brand</div>
<div class="subtitle" style="z-index: 9;">Our Partners</div>
</div>
</div>
</div>
</body>uj5u.com熱心網友回復：
設定max-width: 100%;您的img，以便它可以相應地調整大小。
您也可以嘗試在新部分mt-4中代表margin-top: 1.5rem額外間距。
.container-home-about {
padding-top: 65px;
padding-bottom: 65px;
}
.row {
height: 100%;
}
.about-content>p {
font-size: 16px;
font-weight: 400;
color: #5d77aa;
}
.about-image {
position: relative;
}
.img-bottom {
position: relative;
z-index: 0;
top: 0;
left: 0;
}
.img-top {
position: absolute;
z-index: 1;
top: 80px;
left: 75px;
}
img {
max-width: 100%;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<div class="home home-about">
<div class="container container-home-about">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 left">
<div class="about-content">
<p style="max-width: 520px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 right">
<div class="about-image">
<img src="https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" class="img-bottom">
<img src="https://images.unsplash.com/photo-1500630417200-63156e226754?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="" class="img-top">
</div>
</div>
</div>
</div>
</div>
<div class="home home-partner mt-4" style="border-top: 1px solid #EAEAEA;">
<div class="container container-home-partner">
<div class="col-xl-3 col-lg-4 col-md-4 partner-title">
<div class="title" style="z-index: 9;">World class brand</div>
<div class="subtitle" style="z-index: 9;">Our Partners</div>
</div>
</div>
</div>
</body>uj5u.com熱心網友回復：
絕對定位將元素從 dom 流中取出。為防止重疊，請添加墊片。
#container{
display:flex;
background-color:lightblue;
position:relative;
}
#bottom{
position:absolute;
left:5%;
top:5vh;
}
#spacer{
height:5vh;
background-color:lightgreen;
}
div{
margin:0;
padding:0;
}
img{
width:50%;
}<div id='container'><img id='top' src="https://images.unsplash.com/photo-1500630417200-63156e226754?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="" class="img-top">
<img id='bottom' src="https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" class="img-bottom">
</div><div id='spacer'></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/484773.html