Html 将一个img与另一个div完全重叠

我试图实现这样的效果，当用户将鼠标放在照片上时，照片会在整个照片上覆盖一个重复的图案

问题：我似乎无法使覆盖div完全覆盖照片。如何做到这一点

JSfiddle：

编辑：更新了小提琴

CSS

#container {
    position: relative;
    padding: 10px;
    width: 1000px;
    height: 500px;
    background: blue;
}

.photo_box {
    padding: 8px 10px 11px 10px;
    background: #fff;
    -webkit-box-shadow: 1px 1px 6px rgba(50, 50, 50, 0.25);
    -moz-box-shadow:    1px 1px 6px rgba(50, 50, 50, 0.25);
    box-shadow:         1px 1px 6px rgba(50, 50, 50, 0.25);
    border-radius: 5px; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    display: inline-block;
    position: relative;
}

.photo {
    position: absolute;
    z-index: 0;
    margin-bottom: 13px;
    border-radius: 5px; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.photo_tint {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    background: red;
    -moz-opacity: 0.70;
    opacity: 0.70;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
}​

HTML

<div id="container">
    <div class="photo_box">
        <img src='http://www.kurzweilai.net/images/Google-logo.jpg' class="photo">
            <div class="photo_tint"></div>
        </img>
    </div>
</div>​

​

---

z-index:-1在图像上或z-index:2在div上

#container {
    position: relative;
    width: 500px;
    height: 500px;
    background: blue;
}

.photo {
    position: relative;
    width: 300px;
    height: 100px;
    background: green;
}

.photo_tint {
    position: absolute;
    z-index: 1;
    background: red;
    width: 300px;
    height: 100px;
    top:0px;
}​

---

只需使用

top

和

left

定位

photo\u-tint

div即可

除了将

left

和

top

属性添加到

.photo\u tint

之外，您还需要将

.photo\u box

相对定位（在编辑问题之前没有）

绝对位置的左/上/右/下属性使用层次中较高的最后一个元素，位置设置为相对或绝对。如果没有父元素的位置设置为相对/绝对，则使用主体。在您的例子中，相对位置最近的元素是

#container

，因此当

left

和

top

设置在

上时，它使用
#container
的原点，而不是
。根据需要使用photo\u box
的原点来达到预期效果

此外，如果元素被设置为position:absolute，并且没有设置left/top/right/right属性，那么该元素的行为将不会是绝对的。
我更新了JSFIDLE以更准确地反映场景。哦，我不想覆盖白色部分，只想覆盖图像。我试着改变顶部并离开，但如果顶部不是0，它会突然跳起来。另外，红色的覆盖层和白色框一样宽，我只需要它和照片一样宽。
#container {
    position: relative;
    width: 500px;
    height: 500px;
    background: blue;
}

.photo {
    position: relative;
    width: 300px;
    height: 100px;
    background: green;
}

.photo_tint {
    position: absolute;
    z-index: 1;
    background: red;
    width: 300px;
    height: 100px;
    top:0px;
}​

.photo_box {
    position: relative;
}

.photo_tint {
    left:0;
    right:0;
}​