如何使图像位置相对于另一个图像绝对？

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。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

不确定这是否是您要完成的任务，但您可以随时将大图像设置为#photo的背景，并将小图像放置在该框内。

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