Place one image on top of the other [closed] - html

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I need to place my second picture (img id="stack") on top of my first picture. I've tried using relative and absolute positioning but it just seems to be below each other.
This is the JS Fiddle
HTML
<div id="imgpos">
<img id="bkgr" src="http://upload.wikimedia.org/wikipedia/commons /f/fd/Moon_in_Sunrise_Sky_2.jpg" width="400" height="400">
<img id= "stack" src="http://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast%2C_Dhaka%2C_Bangladesh.JPG" width="200" height="150">
</div>
CSS
#imgpos
{
position: relative;
left: 30px;
}
#imgpos bkgr
{
position: absolute;
z-index: 1;
}
#imgpos stack
{
position: absolute;
z-index: 2;
}

Answer 1

You forgot the octothorpe.
#imgpos #bkgr
{
position: absolute;
z-index: 1;
}
#imgpos #stack
{
position: absolute;
z-index: 2;
}
Since IDs are unique anyways, you can omit the #imgpos, too:
#bkgr {
position: absolute;
z-index: 1;
}
#stack {
position: absolute;
z-index: 2;
}
And since the images are in the right order anyways, you can omit the z-index, too:
#bkgr {
position: absolute;
}
#stack {
position: absolute;
}
And since the rules are now the same, you can combine them:
#bkgr, #stack {
position: absolute;
}