如何使图像位置相对于其他图像是绝对的？

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; 
}