如何将图像放在另一个图像之上？

Question

I have seen a few that explains how to do it with absolute position. I'm currently making a Bootstrap 3 site, so I cannot use the absolute attribute.

Below is a quick mock-up of what I'm talking about (note that the play buttons won't be burned into the images below)

Also, if you could explain how to make a similar gradient, it would be nice.

I have tried to use the z-index attribute, but when using it I couldn't figure out how to position the elements relative to elements with lower z-indexes.

Edit: The play-button (seen on top of the images) will not be a part of the jpg image asset. Rather, it will be its own svg asset put on top of the jpg (thumbnail) image. I choose this way so that I can animate the "play-button" independently.

Neither will the gradient, title, subtitle or "article-tag" be a part of the thumbnail image asset.

The red "divider's" will be its own svg asset as well.

Ideally, I would like to be able to place <img></img> objects on top of another <img></img> bounding box and be able to move it relative to the bounding box. eg x=50% y=50% for centering. The method should be scalable so that I can have more than two layers as well as having multiple objects on the same layer.

Note: The thumbnail images will be stored on the web server in a resolution of 1920x1080. When trying to use the "divider" as a background image I had a clipping issue:

It wouldn't expand its parent <div> . (also, is there a way to detect user's screen size and rescale the pictures accordingly (on the server) in order to increase loading speed? Like a cookie or something?)

I'm sorry for probably breaking tons of rules on the site, this is my first question.

Answer 1

regarding the gradient, a short css writing will be:

background: -webkit-linear-gradient(135deg, #a11633 45%, #7D1229 48%, #7D1229 20%);

In addition: I've created a JSFiddle for you for the layouting :)

HTML:

<div class="relative-container">
  <div class="absolute-container">
    <div class="flex-1">
    Img 1
    </div>
    <div class="flex-1">
    Img 2
    </div>
    <div class="flex-1">
    Img 3
    </div>
  </div>
</div>

CSS:

.relative-container{
  width:300px;
  height:200px;
  background: -webkit-linear-gradient(135deg, #a11633 45%, #7D1229 48%, #7D1229 20%);
}

.absolute-container{
  width:300px;
  height:100px;
  display:flex;
  align-items: center;
  position:absolute;
  top:55px;
}

.flex-1{
  flex:1;
  border:1px dashed black;
  text-align:center;
}