Bootstrap 4 стека изображения на изображении

Question

В настоящее время я работаю над сайтом, использующим Bootstrap 4. У меня есть div с изображением человека, который держит iPad внутри.Экран iPad прозрачный, поэтому моя идея заключалась в том, чтобы поместить изображение в этот раздел или видео.

Я не эксперт по CSS, но возможно ли поместить изображение за планшет с помощью z-index?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="row">
    <div class="col-md-12">
        <img id="wallpaper" src="https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&h=350" width="35%" class="mx-auto d-block">
        <img id="tablet" src="https://avatanplus.com/files/resources/original/58fb507e4582f15b95b26d4d.png" width="60%" class="mx-auto d-block">
    </div>
</div>

Answer 1

Fiddle Объясняет, как складывать изображения с помощью z-index.

Answer 2

Вы должны играть с отзывчивостью - но идея может быть следующей:

.tabletWrapper {
  position:relative;
  margin:0 auto;
  width:600px;
}

#wallpaper, #tablet {
  position:absolute;
}

#tablet {
  left:0;
  right:0;
  width:65%;
}

#wallpaper {
  left:0; 
  right:11px;
  width:33%;
  top:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-md-12">
  <div class="tabletWrapper">
    <img id="wallpaper" src="https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&h=350" class="mx-auto d-block">
    <img id="tablet" src="https://avatanplus.com/files/resources/original/58fb507e4582f15b95b26d4d.png" class="mx-auto d-block">
  </div>
  </div>
</div>

Answer 3

Да, вы можете добиться этого эффекта позицией ваших элементов.Вам не нужно z-index здесь, так как ваши элементы уже в правильном порядке.Имейте в виду, что изображение должно вписываться в рамку планшета.В настоящее время это не так.

Вот рабочий пример:

#wallpaper,
#tablet {
  position: absolute;
}

#wallpaper {
  width: 200px;
  top: 70px;
  left: 110px;
}

#tablet {
  width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-md-12">
    <img id="wallpaper" src="https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&h=350" class="mx-auto d-block">
    <img id="tablet" src="https://avatanplus.com/files/resources/original/58fb507e4582f15b95b26d4d.png" class="mx-auto d-block">
  </div>
</div>