0

基本上我有一个嵌套在 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 中的 Bot 嵌套在

#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 中运行良好。任何帮助将不胜感激

4

2 回答 2

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-top 和 padding-left。像这样的东西：

padding: 8px 0 0 8px;
于 2012-08-06T22:54:01.237 回答
0

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

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

（但我必须承认，我更喜欢 PeterVR 的代码，因为这可以保持相关性，如果您将“新”内容放在#tape div 上方，这会派上用场）。

于 2012-08-06T22:59:05.360 回答