Question

Here是一个JSFiddle（对我来说）完美地展示了这个问题。

但是，我有几个div会动态加载其中的图像，然后我在顶部有一个透明的div会有一些选项，但是当完全加载后面的图像时，顶部div的位置会变得很有趣。

关于如何防止这种情况的任何想法？

以下是相关代码：的 HTML：

<div id="img">
<img src="http://tbremer.com/images/portfolio/Concert/_MG_6961.jpg" height="200">                        <div id="imgOver">test</div>
</div>

<div id="img">
<img src="http://tbremer.com/images/portfolio/Concert/_MG_6964.jpg" height="200">                        <div id="imgOver">test</div>
</div>

<div id="img">
&nbsp;<img src="http://tbremer.com/images/portfolio/Concert/_MG_7063.jpg" width="200">&nbsp;
<div id="imgOver">test</div>
</div>

CSS：

#img{
    float: left;
    margin: 5px;
    padding: 0;

    width: 200px;
    height: 200px;

    text-align: center;
    font-size: 1em;

    background-color: rgb(232, 227, 223);
    border: 1px solid #000;
}

#imgOver{
    position: relative;
    top: -200px;

    width: 200px;
    height: 200px;

    background-color: rgba(0,0,0,.7);    
    color: #fff;
}

Answer 1

正确的方法就是这样demo

Full Demo

说明：您要做的是使用position: relative; img而不是position: absolute;使用#imgOver并删除top: -200px

HTML

<div id="img">                       
    <img src="http://tbremer.com/images/portfolio/Concert/_MG_6961.jpg" height="200">  
<div id="imgOver">test</div>     
</div>

CSS

#img{
    float: left;
    margin: 5px;
    padding: 0;
    width: 200px;
    height: 200px;
    text-align: center;
    font-size: 1em;
    position: relative;
    background-color: rgb(232, 227, 223);
    border: 1px solid #000;
}

#imgOver{
    position: absolute;
    top: 0;
    width: 200px;
    height: 200px;
    background-color: rgba(0,0,0,.7);    
    color: #fff;
}

位置相对div稍微移位

1 个答案: