Добавление изображения поверх изображения после загрузки

Question

Я пытаюсь создать веб-сайт, на котором вы можете загрузить изображение, затем выбрать другое и добавить его поверх загруженного. Я использую jquery, чтобы сделать изображение перетаскиваемым и изменяющим его размер, и все работает нормально, за исключением того, что я не могу добавить его поверх загруженного изображения. Вот мой код:

код:

$(document).ready(function() {
  $(document).on('click', '.block-add', function() {
    var a = $(this);
    var src = a.find('img:first').attr('src');
    var elem = $('<div class="container"><img src="' + src + '" class="blocks" /></div>');
    $('.block').append(elem);
    elem.draggable();
    elem.find('.blocks:first').resizable();
    return false;
  });
});

.blocks {
  width: 10%;
  z-index: 9999;
}

.block {
  width: 100%;
  height: 100%;
  border: 1px solid #C8C8C8;
  margin: 0px;
  background-color: #F0F0F0;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload">
  <input type='file' onchange="readURL(this);" /> <br>
</div>
<br/>
<div class="block">
  <div class="background">
    <img id="bg" src="" alt="" width="50%" ; height="50%" ; class="center" />
  </div>
</div>
<br/>
<div id="existingImges">
  <a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
  <a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
  <a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
  <a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
</div>

Итак, вот результат в этом случае:

и вот что я вроде бы после добавления колеса:

Answer 1

Как мы с @Troy Bailey упомянули, путь к успеху - это атрибут css z-index.

Вот изменения:

Первый шаг:

Добавьте указанный выше атрибут z-index в класс .block: z-index: 1;.

Второй шаг:

Для вашего javascript вас необходимо добавить несколько строк, которые увеличивают атрибут z-index ваших созданных элементов div, с классом .container.

$(document).ready(function() {
    $(document).on('click', '.block-add', function() {
        var src = $(this).find('img:first').attr('src');

        //New line
        //First, find out how many images has being added and dragged
        var foundAddedDivs = $('.block').find('.container').size();
        //New line
        //Second, get the current value from recently added 'z-index' from fist step.
        var backGroundDivIndex = $('.block').css("z-index");
        //New line
        //Third: Calulate a new value for 'z-index' for each draggable elements
        var zIndex = backGroundDivIndex + foundAddedDivs;
        //Modified line
        //Forth: Creates a new div and add calculated z-index to draggable element
        var elem = $('<div class="container" style="z-index: '+ zIndex +'">
                      <img src="' + src + '" class="blocks" /></div>');

        $('.block').append(elem);
        elem.draggable();
        elem.find('.blocks:first').resizable();
        return false;
        });
    });

Answer 2

.block-add {z-index: 99;}
/* just increase the z-index of the wheel so it can be in front of the car image */