HTML/CSS/Ruby on Rails 标头，带有突出到页面内容的徽标答案

【问题标题】：HTML/CSS/Ruby on Rails Header with logo that overhangs into page contentHTML/CSS/Ruby on Rails 标头，带有突出到页面内容的徽标
【发布时间】：2015-09-17 06:55:14
【问题描述】：

我希望能够在标题上悬挂徽标，请参阅this link 以获得视觉示例。根据我的搜索，大多数结果都是关于使用 WordPress 实现这一点，而不仅仅是 HTML/CSS（包括提供的链接）。我将 RoR 与 Twitter Bootstrap 一起使用，以便为页面创建一些快速样式，包括标题（可能是相关信息）。

我猜这个问题的答案确实是以 HTML/CSS 为中心的，所以，如果我有一个标题 <div>，其中包含左侧的徽标以及右侧的一组导航链接，如何我可以让那个标志悬垂到下面页面的其余部分吗？

此外，如果能够为悬垂的部分添加轻微阴影，则可以加分 :)

【问题讨论】：

标签： html css ruby-on-rails twitter-bootstrap

【解决方案1】：

您可以使用 z-index 属性 (CSS) 设置您的徽标图像，使其始终位于前面，然后您可以将图像定位在您的标题中，它看起来就像是挂着的。轻微的阴影应该是图像本身的一部分。

【讨论】：

设置 z-index 属性是否确保图像的大小不会影响其包含（标题）<div> 的大小？当我只是在标题<div> 中添加了一个图像标签时，它增加了标题的高度以包含图像。
@MandM 您可以浮动图像以将其从 div 中删除，这样标题的高度就不会改变。试试看，如果您有任何问题，请告诉我。

【解决方案2】：

尝试使用css代码

position: absolute;

这将确保您的徽标浮动在您想要的任何位置之上。然后调整您希望如何放置徽标图像：

margin-top: 100px;

使用任何你想要的像素。

【讨论】：