如何防止文字出现在图像后面答案

【问题标题】：How to keep text from going behind an image如何防止文字出现在图像后面
【发布时间】：2014-01-31 17:00:20
【问题描述】：

我试图让我的顶部导航栏不落后于我页面标题上的徽标图像。请参阅下面的页面示例，当它在我的屏幕中最大化时：

这是浏览器窗口变小后的样子：

我正在尝试修复此页面，以便当窗口变小时当前在图像后面运行的顶部导航栏将移动并向右延伸。

有什么想法吗？该网站是 Inhishands.com

谢谢！

【问题讨论】：

【解决方案1】：

您的问题是菜单 (<ul id="display">) 具有 CSS 属性 float:right，因此它将始终相对于屏幕右侧定位。当屏幕变小时，右侧向左移动，因此菜单也向左移动（并与徽标重叠）。

如果您希望菜单始终从徽标的右侧开始（而不是重叠），那么您可以给它属性float:left 并在其左侧添加一个边距（如@ 987654324@)。还有其他定位它的方法（例如使用绝对定位），但这将完成工作。

【讨论】：

如果他的问题是元素的分层，我认为它更有可能是 z-index 问题。特别是如果页面应该缩放 - 可能需要向右浮动。
OP 说当页面变小时，他们希望菜单“移动并向右延伸”，这对我来说意味着他们希望它保持在徽标的右侧，而不是重叠。我认为这是一个定位问题，而不是 z-index 问题（尽管我同意帖子标题暗示相反的意思）。
好的，这有点令人困惑，好吧哈哈……稍微编辑你的帖子，我会删除反对票。

【解决方案2】：

在导航中使用 Z-index。在 CSS 中，将手形图像的 z-index 设置为低于导航的 z-index，您将看到导航位于顶部而不是后面。

以下是有关 Z-Index 的一些信息，以备不时之需：http://www.w3schools.com/cssref/pr_pos_z-index.asp

【讨论】：

【解决方案3】：

设计不错。

首先，您需要在 CSS 中修复顶部菜单 HEADER 的最小宽度。根据您需要的分辨率修复标题最小宽度：

#Header{
min-width: 1237px;
}

或直接进入HTML

<div id="Header" style="min-width: 1237px">

【讨论】：