z-index and position relative - css

Question

I have a modal, that is show/hide using JavaScript.
In the modal an image will be inserted using JavaScript. Also over the image a div element will exist that will simulate cropping (get the coordinates of the image).
I have a problem making the image to stay below the modal-crop.
modal-crop and the image need to be in the center of modal-area.
I can't use grid or flex because I need to support 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

Your image need to be positionned absolutely like this :
.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

I think I got an understanding of what you want to achieve. And I also know that it can be a pain to overlap elements with absolute positioning in multiple layers (even more so when it comes to different browsers).
I recommend you to use a grid layout, which is quite easy to set up:
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;
}
Be aware though, that in this solution the "modal crop" needs to be set to width and and height of the image. But I used similar solutions in other situations and will not be hard to adjust it so that it works for any image sizes.
Have a fiddle: https://jsfiddle.net/9odLnh7r/

Answer 3

The question is note very clear, but as far as I understand you need to add this css ruleset to your image:
.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>