1

我在我的网站http://www.tonypalazzo.com的某个部分悬挂的丝带有以下 css 。 

.ribbon {
    float:left;
    padding:5px 0 0 0;
    margin:0;
    width:217px;
    position:absolute;
    left: 965px;
    top: 67px;
    z-index: 999999;
}

当在不同尺寸的显示器中查看时，甚至当我在 Chrome 中放大和缩小（以及 Dreamweaver 设计视图中的一个完全随机的位置）时，它会出现在不同的水平位置。它保持正确的垂直（顶部）定位，但看起来它总是希望与左侧保持 965px 的距离。这使得它在以不同分辨率查看时会出现在完全不同的位置。

使用“相对”位置，它不会覆盖我需要它覆盖的其他 div 框。关于如何让这个 div 位于（覆盖）其他 div 的前景的任何帮助，同时保持与我的社交媒体图标所在位置相同的左/上值（参见网站）？

我读过其他关于这个的帖子，告诉我把它放在我的“父”div中。如果我的“block_header”是父母，我相信它就在其中。这是 html 的快速摘要（忽略 .'s 我把它们放在那里只是为了确保代码显示：

<div class="main">
    <div class="header">
        <div class="block_header">
            <div class="logo"></div>
            <div class="social"></div>
            <div class="ribbon">
                <a href="portfolio.html"><img src="images/portf.png" onmouseover="this.src='images/portf1.png'" onmouseout="this.src='images/portf.png'"/></a>
            </div>
        </div>
    </div>
</div>

谢谢！

4

1 回答 1

1

您的功能区与屏幕左边缘保持 965 像素，就像它应该的那样。如果您希望它相对于其父级定位，请将样式添加position: relative到父级。在这种情况下，您应该将其添加到.block_header，然后重新定位功能区。

于 2012-11-10T01:57:27.650 回答