圖像疊加「的margin-top」不正確地使用不同的圖像高度

Question

的問題表現在小提琴JsFiddle

的圖像疊加設置爲邊距中看得最清楚：-100％;但它不適用於長度超過300x300的物品。

香港專業教育學院試圖如下使用jquery：

$(window).load(function() { 
     $(".overlay").each(function() { 
      var $parentHeight = $(".overlay").parent().height(); 

      $(".overlay").css("margin-top", -$parentHeight); 
     }); 
    }); 

這有同樣的結果。

Answer 1

您應該使用top：0不是margin-top：-100％;

.overlay { 
    width: 100%; 
    height: 100%; 
    background-color: red; 
    opacity: 0; 
    z-index: 1; 
    -webkit-transition: .2s all; 
    position: absolute; 
    top:0; 
} 

我沒有你的風格此編輯在這裏看到：https://jsfiddle.net/IA7medd/ngmpm5x0/