html - CSS placing one image on top of another

Question

I am working on CSS design template.

I have two images imageOne and imageTwo.

Both are position: relative because if I set one of them position: absolute then it does not stay as responsive anymore and responsiveness is the key here.

What I want is to place imageTwo on top of imageOne.

How can I achieve that while twitterbootstrap's responsive feature still works on these two images?

Below is my code: (jsfiddle available here)

<div class="imageOne image"></div>
<div class="imageTwo image"></div>

CSS

.image {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}
.imageOne {
    z-index: 0;
}
.imageTwo {
    z-index: 1;
}

Answer 1

I've added a wrapper div for those images, with position relative and changed .image { position: relative to absolute and it worked for me. http://jsfiddle.net/uS7nw/2/

<div class="container">
    <div class="imageOne image"></div>
    <div class="imageTwo image"></div>
</div>

And

.container {
    position: relative;
}

.image {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}