Slideshow won't accept fixed height

Question

My current slideshow css with script doesn't seem to accept a common height for the images. Because of this... when they transition the smaller pictures look like they are actually displaying partially above the previous one (aka you see the older image below it). Is there a reason why the height value I have set doesn't do anything and how do I fix this?

CSS

/* For Slideshow */
/* the slide container with a fixed size */
.slides {
box-shadow: 0px 0px 6px black;
margin-left: 0; 
margin-right: 0;
width: 500px;
height: 200px;
postion: relative;
}

/* the images are positioned absolutely to stack. opacity transitions are animated. */
.slides img { 
display: block;
position: absolute; 
transition: opacity 1s;
opacity: 0;
width: 100%;
}

/* the first image is the current slide. it's faded in. */
.slides img:first-child { 
z-index: 2; /* frontmost */
opacity: 1;
}

/* the last image is the previous slide. it's behind 
the current slide and it's faded over. */
.slides img:last-child {
z-index: 1; /* behind current slide */
opacity: 1;
}
.container {

margin-left: auto;  
margin-right: auto;
background-color: #B2D1E0;
width: 1000px;
height: 200px;
border-top: 3px solid black;
position: relative;
margin-bottom: 100px;
}

HTML

<script>

function nextSlide() {
        var q = function(sel) { return document.querySelector(sel); 

}   
        q(".slides").appendChild(q(".slides img:first-child"));
}
setInterval(nextSlide, 3000)

</script>

<div class = "container">

<div class="slides">
<img src="http://media02.hongkiat.com/programming-myth/programmer.jpg">
<img src="How-to-Hire-a-Software-Developer1.jpg">
<img src="info-tech-business.jpg">
<img src="IT-Outsourcing.jpg">
<img src="http://lorempixel.com/500/300/?r=5">
</div>
</div>

Answer 1

Add height in slides img as well. Hope this will work

 .slides img { 
    display: block;
    position: absolute; 
    transition: opacity 1s;
    opacity: 0;
    width: 100%;
    height:200px;
    margin-top:0px;
    }