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;
}

Answer 2

When you have elements within a container which has the property: position: relative;
then any elements within that container which have the property: position: absolute;
will have their offset origin set to the top-left of the container.

For example,

<div class="relative"> <!-- top: 50px; left: 100px; //-->
  <div class="absolute"></div> <!-- top: 0; left: 0; //-->
  <div class="absolute"></div> <!-- top: 10px; left: 20px; //-->
</div>

The first absolute child will be positioned at (50px, 100px) relative to the body, or (0,0) from the container.

But the second child will be positioned at (10px, 20px) relative to container, or (60px, 120px) relative to the body (add 50+10 from the top, 100+20 from the left).