如何使圖像位置相對於其他圖像是絕對的？

Question

#main { 
 
    border: 2px blue solid; 
 
    width: 100%; 
 
} 
 

 

 
#photo { 
 
    display:flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
#photo > #large { 
 
    width:70%; 
 
    margin: 20px 0px; 
 
    border: 3px red solid; 
 
} 
 

 
#small { 
 
    position: absolute; 
 
    width:150px; 
 
    left:0px; 
 
}

<div id="main"> 
 
     <div id="photo"> 
 
      <img src="image/test.jpg" id="large"> 
 
      <img src="image/sale.jpg" id="small"> 
 
     </div> 
 
     </div>

以上是我的代碼，我要的是大圖像是在照片的div和小圖片設置爲絕對和相對大的圖像中心。

我該怎麼做？

現在小圖像是相對於主div。

Answer 1

您將需要在這裏使用額外的div。

#main { 
 
    border: 2px blue solid; 
 
    width: 100%; 
 
} 
 

 

 
#photo { 
 
    display:flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
#photo > #photo-center { 
 
    width:70%; 
 
    position:relative; 
 
    margin: 20px 0px; 
 
    border: 3px red solid; 
 
} 
 
#large{ 
 
    width:100%; 
 
    } 
 

 
#small{ 
 
    width:150px; 
 
    position:absolute; 
 
    left:0; 
 
    top:0; 
 
    z-index:1; 
 
    }

<div id="main"> 
 
     <div id="photo"> 
 
      <div id="photo-center"> 
 
      
 
      <img src="http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg" id="large"> 
 
       <img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" id="small"> 
 
      </div> 
 
     </div> 
 
     </div>

Answer 2

不知道這是否是你想要完成的，但你總是可以將你的大圖像設置爲#photo的背景並將相對較小的那個放置在該框內。

#photo { 
    background-image: url(large.jpg); 
    position: relative; 
} 
#photo > img { 
    position: absolute; 
}