twist the position of two sibbling divs

HTML

<div class="md">
    <div class="div1">
        <a href="/health-slideshow/hiv-mouth-sores" title="HIV Mouth Sores: What They Look Like and How to Treat Them"><img src="http://rack.3.mshcdn.com/media/ZgkyMDEzLzA0LzMwLzFlL2NvZGluZ2Z1dHVyLmQ1MzY5LmpwZwpwCXRodW1iCTEyMDB4NjI3IwplCWpwZw/9a2e4cfd/a4d/coding-future.jpg">
            </a>
    </div>    
    <div class="div2">
    <a href="/health-slideshow/hiv-mouth-sores" title="HIV Mouth Sores: What They Look Like and How to Treat Them"><img src="http://rack.3.mshcdn.com/media/ZgkyMDEzLzA0LzMwLzFlL2NvZGluZ2Z1dHVyLmQ1MzY5LmpwZwpwCXRodW1iCTEyMDB4NjI3IwplCWpwZw/9a2e4cfd/a4d/coding-future.jpg"></a>
        </div>    
        <!--<h1 class="text">Hello World!!!</h1>-->
</div>
        <div class="md2">
            z-index: testing
        </div>

CSS

.md {
    position: relative;
    z-index: 15;
    height: 20px;
}
.div1 img{
    width:200px;
    height:100px;    
}
.div2 img{
    width:300px;
    height:50px;    
}
.div1{
    position: absolute;       
    z-index: 1000;
}
.div2{
    //float: left;
    position: absolute;
    border: 3px solid red;
    z-index: 500;
}
.text {
    position: absolute;
    border: 3px solid green;    
    color: red;
}
.md2 {
    position: fixed;
    top: 0px;
    border: 3px solid green;    
    color: yellow;
    font-size: 20px;    
    z-index: 16;
}