Question

基本上我有一个嵌入2个div的div中的图片。我想在图片的一角将一条胶带叠加到它上面。

所以我为那段磁带图像制作了一个div，并把它放在文档的底部，给它相对的位置并给它这些属性。

#tape
{
    width: 100px;
    height: 65px;
    position:relative;
    left: 25px;
    top: -662px;
}

这是图片的属性：

#character-spotlight 

    {
        margin-left:50px;
        width:250px;
        height:250px;
        float:left;
        z-index:1;
    }

这些Div的机器人嵌套在

中

#content 
{
    width:800px;
    height:1360px;
    background-image:url(Cork.Board.png);
    background-size:100%;
    float:left;
    display:block;
}

它本身嵌套在

中

#container 
{
    width: 1024px;
    height:1600px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 50px;
    display:block;
}

这是网页

www.workaholicsfans.com/characters-files/Adam-Demamp.html

它适用于Chrome，但不适用于IE和Firefox。任何帮助将不胜感激

Answer 1

（你的帖子中没有链接）我几乎无法相信你所描述的情况并且提供了CSS可以工作。您在Chrome中使用它的事实只是纯粹的运气，我想，您是否可能一直在玩这些数字以使其适合。

解决方案实际上相当简单。

<div class='picture-wrapper'>
 <img class='picture' src='picture.../>
 <img class='tape' src='tape... />
</div>

然后在css

.picture-wrapper {
 position: relative;  /* this now acts as the reference for  position absolute of the children */
}
.tape {
 display: block;
 position: absolute;  /* position according to its parent */
 top: 0;  /* top position */
 left: 0; /* left position */
 z-index: 5; /* bring to front */
}

这应该可以解决问题。

修改我刚看到你添加了链接。如果你想让胶带溢出图片边缘，那么简单的方法就是在包装上添加一些填充顶部和填充物。像这样的东西：

padding: 8px 0 0 8px;

Answer 2

或者如果您希望它根据页面容器绝对定位：

#tape {
    height: 65px;
    left: 325px;
    position: absolute;
    top: 300px;
    width: 100px;
}

（但我必须承认，我更喜欢PeterVR的代码，因为这可以保持相对的东西，如果你将'new'的东西放在#tape div之上，这会派上用场。）

位置：相对Div在Firefox / IE中不起作用

2 个答案: