[英]z-index and position relative
我有一個模態,即使用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>
您的圖片必須絕對像這樣放置:
.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>
我想我對您想要實現的目標有所了解。 而且我也知道,將具有絕對位置的元素重疊在多層中可能會很痛苦(在不同的瀏覽器中更是如此)。
我建議您使用網格布局,它很容易設置:
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/
問題很清楚,但是據我了解,您需要將此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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.