Css/Html размещение одного изображения поверх другого

Мне надо сделать так, чтобы нижнее изображение не перекрывало кофе.
css:
#coffee{
position: absolute;
top: 200px;
left: 1200px;
height: 140%;
width: 30%;
border-radius: 30px;
}
#orange{
position: absolute;
top: 700px;
left: -100px;
height: 100%;
width: 1000%;
border-radius: 30px;
}
html:
<img id="coffee" src=" https://ic.pics.livejournal.com/inna1903gr/30601390/15888800/15888800_1000.jpg ">
<img id="orange" src="https://avatars.mds.yandex.net/get-marketpic/1579007/market_XdaZt7hYaERd3OoLH83Q2A/orig">