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

Answer 1

If you have a responsive image in a container and want to place another image on top of that image:

HTML:

.container {
  position: relative;
  width: 100px;/*Or whatever you want*/
}
.imageOne {
  width: 100%;
}
.imageTwo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <img class="imageOne" src="https://www.google.no/images/srpr/logo11w.png">
  <img class="imageTwo" src="https://news.ycombinator.com/y18.gif">
</div>

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).

Answer 3

.imageTwo {
    z-index: 1;
    margin-top: -100px;
}

Answer 4

http://jsfiddle.net/uS7nw/4/

.imageTwo {
    z-index: 1;
    background:red;
    margin-top: -42px;
}

Answer 5

Change position: relative; to position: absolute;

fiddle

If you still want a relative position, wrap the absolute in another div.

Answer 6

I think you want to wrap both of them in a div with position:relative

<div style="position:relative">
<div class="imageOne image"></div>
<div class="imageTwo image"></div>
</div>

Then give both of the images an absolute position

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