Z索引和相对位置

Question

我有一个模态，即使用JavaScript显示/隐藏。

在模式中，将使用JavaScript插入图像。 同样在图像上将存在一个div元素，该元素将模拟裁剪（获取图像的坐标）。

我在使图像保持在模态作物以下时遇到问题。 模态作物，并且图像必须位于模态区域的中心。

我不能使用grid或flex，因为我需要支持IE9。

 .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; overflow: hidden; outline: 0; } .modal-area { position: absolute; top: 50%; left: 50%; width: 50%; height: 50%; transform: translate(-50%, -50%); margin: 0 auto; padding: 30px; background-color: blueviolet; border-radius: 4px; box-shadow: 0 0 50px black; overflow: hidden; } .modal-area img { margin-left: auto; margin-right: auto; } .modal-crop { position: relative; background-color: aliceblue; left: 0; right: 0; top: 0; margin-left: auto; margin-right: auto; width: 200px; height: 200px; opacity: 0.2; z-index: 2; } 

 <div class="modal"> <div class="modal-area"> <div class="modal-crop"></div> #img will be inserted here using Javascript# </div> </div> 

Answer 1

您的图片必须绝对像这样放置：

 .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; overflow: hidden; outline: 0; min-height: 300px; } .modal-area { position: absolute; top: 50%; left: 50%; width: 50%; height: 50%; transform: translate(-50%, -50%); margin: 0 auto; padding: 30px; background-color: blueviolet; border-radius: 4px; box-shadow: 0 0 50px black; overflow: hidden; } .modal-area img { margin-left: auto; margin-right: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; } .modal-crop { position: relative; background-color: aliceblue; left: 0; right: 0; top: 0; margin-left: auto; margin-right: auto; height: 100%; opacity: 0.2; z-index: 2; } 

 <div class="modal"> <div class="modal-area"> <div class="modal-crop"></div> <img src="https://lorempixel.com/500/500/"> </div> </div> 

Answer 2

我想我对您想要实现的目标有所了解。 而且我也知道，将具有绝对位置的元素重叠在多层中可能会很痛苦（在不同的浏览器中更是如此）。

我建议您使用网格布局，它很容易设置：

HTML

<div class="modal">
    <div class="modal-area">
        <img src="http://via.placeholder.com/200x200">
        <div class="modal-crop"></div>
    </div>
</div>

CSS

.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: block;
overflow: hidden;
outline: 0;
    }


.modal-area {
  display:grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
  justify-items:center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    padding: 30px;
    background-color: blueviolet;
    border-radius: 4px;
    box-shadow: 0 0 50px black;
    overflow: hidden;
}

.modal-area img {
    grid-row: 1/span 1;
    grid-column: 1/span 1;
    z-index:1;
}


.modal-crop  {
  width: 200px;
  height: 200px;
  grid-row: 1/span 1;
  grid-column: 1/span 1;
  background-color: red;
  opacity: 0.2;
  z-index:2;
}

但是请注意，在此解决方案中，“模式裁剪”需要设置为图像的宽度和高度。 但是我在其他情况下也使用了类似的解决方案，因此很难对其进行调整以使其适用于任何图像尺寸。

小提琴： https : //jsfiddle.net/9odLnh7r/

Answer 3

问题很清楚，但是据我了解，您需要将此css规则集添加到图像中：

 .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; /* display: none; */ overflow: hidden; outline: 0; } .modal-area { position: absolute; top: 50%; left: 50%; width: 50%; height: 50%; transform: translate(-50%, -50%); margin: 0 auto; padding: 30px; background-color: blueviolet; border-radius: 4px; box-shadow: 0 0 50px black; overflow: hidden; } .modal-area img { margin-left: auto; margin-right: auto; } .modal-crop { position: relative; background-color: aliceblue; left: 0; right: 0; top: 0; margin-left: auto; margin-right: auto; width: 200px; height: 200px; opacity: 0.2; z-index: 2; } .centerMe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

 <div class="modal"> <div class="modal-area"> <div class="modal-crop"></div> <img class="centerMe" src="http://www.budgetstockphoto.com/bamers/stock_photo_spectrum.jpg"> </div> </div>