CSS "absolute"没有停留在一个地方

Question

我在我网站的某个部分挂了一条功能区的以下 css http://www.tonypalazzo.com .

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

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

对于“相对”位置，它不会覆盖我需要覆盖的其他 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>

谢谢!

Answer 1

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