位置：相对分区不工作在Firefox/IE

基本上我有一个嵌套在2个div div的图片。我想在图片的一角叠加一块胶带。位置：相对分区不工作在Firefox/IE

因此，我为该磁带图像制作了一个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。任何帮助将不胜感激

来源

2012-08-06 user1580394

请提供更多详情。你在这里谈论3个div，我只看到2.你的html结构是怎样的？请修正代码格式。而这个链接不起作用。 – polyclick 2012-08-06 22:45:45

对不起，刚更新它 – user1580394 2012-08-06 22:50:24

（没有在您的文章中的链接）我几乎不相信你描述的情况，并提供了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;

来源

2012-08-06 22:54:01 Pevara

谢谢你的人生救星！ – user1580394 2012-08-06 23:24:59

或者，如果你想让它根据页面容器是绝对定位：

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

（但我必须承认，我喜欢PeterVR的代码更好，因为这样下去相关的事情，如果你把'新'东西放在#tape div之上，它就派上用场了。

来源

2012-08-06 22:59:05 polyclick

位置：相对分区不工作在Firefox/IE

回答

相关问题