图像是浏览器调整大小上的重叠文本

Question

我已经完成了CSS验证（确实找到了一些讨厌的未封闭标签，现在排序）。 我正在尝试将图像对齐到页面的右上角，标题文字位于左上角。

我可以这样做，但是当我调整浏览器窗口大小时，图像总是希望在其中任何一个调整大小之前重叠标题文本。如果我删除了用于放置图像的边距，那么图像位于标题文本下方（并且位于右侧）而不是仅位于右侧，但我觉得删除它（同时保持定位）可能是键。我确实需要图像与其他一些元素重叠。

以下是我的代码代码片段：

img#site-logo {
    max-width: 100%;
    height: auto;
    clear: both;
    position: relative;
    z-index: 0;
    margin: -12.87em 2em -16em 0px;
}

对于网站标题：

#site-title a {
    font-size: 4.875em;
    font-weight: bold;
    line-height: 78px;
    padding: 0px;
    margin-right: auto;
    white-space: nowrap;
    z-index: 2;
    position: relative;
}

网站就在这里：

http://dominicpalma.com/

Answer 1

肯定有几种不同的方法可以解决您的问题。 但在我看来，这是为min-width元素设置#page的最佳解决方案。

#page{
    min-width:900px;
}

我在宽度方面玩了一下，认为在你的情况下{900}的min-width最合适。