CSS bring img to front - html

Question

Im having some trouble getting an image back to the front.
So basically this is my code segment:
<itemimg>
<img src="images/table1.jpg" />
<img src="images/table1-side.jpg">
</itemimg>
The second a href which links table1-side.jpg is overlapping thetable1.jpgbut i want it the other way around.table1.jpg` should be on top.
The css that affects this part is here:
itemimg {
display: block;
width: 200px;
height: 200px;
}
itemimg img:nth-child(1) {
z-index: 9999;
}
itemimg img:nth-child(2) {
z-index: 0;
}
itemimg img {
position: absolute;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 200px;
height: 200px;
}
itemimg a {
display: block;
position: absolute;
cursor: zoom-in;
}
I tried (as you can see), to send the second image to the back with z-index but it isnt doing it. I even tried messing with the position property on the itemimg img to see if it will re-arrange them. I even switched them around in the HTML so one is on top and it does work BUT i am using Lightbox and when i arrange the HTML to where the table1.jpg is on top, the navigation in Lightbox is backwards (as in i have to press the left arrow to go backwards instead of forwards to see the images). <- i know this might be confusing but take a look at it for yourself here. Click on the table to bring up Lightbox and you have to navigate backwards in the slideshow NOT forwards, which is what i dont want. So i figured if i can get the table1.jpg
on top, it will go forwards as i want it to and thats what im having trouble with.
Really need help here, Thanks in advance!
SOLUTION:
For people who wanted to know the solution. Depending on your scenario the below answers work great. I, however wanted to avoid using inline css and classes so i implemented my images into an ul and set the 2nd li's z-index to -1 as such:
HTML
<itemimg>
<ul>
<li><img src="images/table1.jpg" /></li>
<li><img src="images/table1-side.jpg" /></li>
</ul>
</itemimg>
CSS
itemimg {
display: block;
width: 200px;
height: 200px;
}
itemimg ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
}
itemimg li {
width: 200px;
height: 200px;
position: absolute;
}
itemimg ul li:nth-child(2) {
z-index: -1;
}
itemimg img {
position: absolute;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 200px;
height: 200px;
}
itemimg a {
display: block;
position: inherit;
cursor: zoom-in;
}
My website is updated with the end result so go and take a look!

Answer 1

The problem lies on the 2nd z-index. Make it -1 like this:
itemimg {
display: block;
width: 200px;
height: 200px;
}
itemimg img:nth-child(1) {
z-index: 9999;
}
itemimg img:nth-child(2) {
z-index: -1; //make this -1
}
itemimg img {
position: absolute;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 200px;
height: 200px;
}
itemimg a {
display: block;
position: absolute;
cursor: zoom-in;
}

Answer 2

The z-index for both images is 9999.
Solution 1:
Hard code one of them in the HTML.
<itemimg>
<img src="images/table1.jpg" style="z-index:10000"/>
<img src="images/table1-side.jpg">
Solution 2:
Give the front image a id and name it something like "frontImage" then add
.frontImage {
z-index:10000;
}