如何使我的小照片相对于大照片的位置？

Question

#main {
  width:100%;
  display: table;
  height:900px;
}

#left {
  width:75%;
  display: table-cell;
  background-color: #F0F0F0;
  border: 2px red solid;
  vertical-align: middle;
  text-align: center;
}

#right {
  display: table-cell;
  vertical-align: top;
  width: 25%;
  background-color: black;
}

#large {
  width:80%;
  display: block;
  margin: 0 auto;
}

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

#photo {
  position: relative;
}

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

现在，我的小照片的位置似乎与“照片”div有关。 相对于大型照片，我可以添加什么来制作小照片？