Question

我在我的网站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的快速摘要（忽略。我将它们放在那里只是为了确保代码显示：

<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，然后重新定位功能区。

CSS“绝对”不会停留在一个地方

1 个答案: