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