javascript - 图像叠加不起作用

Question

我尝试对图像进行叠加，但我遇到了 2 个问题:

$(document).ready(function () { 
  $('#boximmagini img').click(function(){
    $("#immagine img:last-child").remove()
    var source= $(this).attr('src');    
    $('#immagine').append("<img src="+source+"/>")
    $('#overlay').fadeIn('fast');
    $('#box').fadeIn('slow');   
  });
  $(".chiudi").click(function(){
    $('#overlay').fadeOut('fast');
    $('#box').hide();
  }); 
  $("#overlay").click(function(){
    $(this).fadeOut('fast');
    $('#box').hide();
  }); 
});

.chiudi{                 
  cursor:pointer;
}
.overlay{               
  position:fixed;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  z-index:100;
  cursor:pointer;
}   

#box{ 
  width:600px; 
  height:400px;               
  display:none; 
  z-index:+300; 
  position:absolute; 
  left:30%; 
  top:20%;            
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="overlay" id="overlay" style="display:none"></div>
<div id="box">
  <div class="chiudi">CHIUDI</div><br>
  <div id="immagine"></div>
</div> 
<div id="boximmagini">
  <div><b>Clicca</b></div>
  <img src="http://i62.tinypic.com/icpph2.jpg" class="imgoverlay" style="width: 31%" />       
</div>

问题:

1. 我不知道 #box 在屏幕中间的位置。 left: 30% 它不在屏幕中间。我读过其他问题，很多用户建议使用相对位置的 div，并在其中使用绝对位置的 div。但就我而言，我认为这是不可能的。

2. 当盒子淡入，我调整窗口大小时，盒子“超出”窗口(原因是左属性)

我希望你能帮助我!

对不起我的英语

谢谢!

Answer 1

我这个 fiddle 我设置了你改变的颜色并确保它总是在中间，设置 left:50% 和 translate3d -50% 将总是将它设置到中心，因为位置绝对，如果你也想垂直定位对顶部和 -50% 到 y(第二个参数)做同样的事情:http://jsfiddle.net/whb3mpg4/7/

#box{ 
  width:600px; 
  height:400px;               
  display:none; 
  z-index: 300; 
  position:absolute; 
  top:20%;      
  left:50%;
  transform: translate3d(-50%,0,0);
}

#box img{
    position:absolute;
    left:50%;
    transform: translate3d(-50%,0,0);
}

我知道我可以对两者使用相同的 CSS 类，但我想保持清晰并且不更改 JS 或 CSS 定义

希望这对你有帮助。