如何在图像上放置网站名称和标题

Question

我想将网站标题和标语放在标题中的图像上。我创建了一个用于测试的小提琴：http://jsfiddle.net/rabmalin/tp84y/。

图片和网站品牌的高度需要支持响应式功能，所以不能没有固定的高度。此外，如果仅显示站点品牌并且容器中没有图像，则它需要工作。当我使用绝对位置时，导航栏在图像后面。

<div id="container">
    <header role="banner" class="site-header" id="masthead">
        <div class="header-image-wrapper">
            <img width="1140" height="152" alt="" src="http://nilambar.com.np/blue-planet/wp-content/uploads/2014/02/cropped-Desert.jpg" id="bs-header-image">
            <div class="site-branding">
                <div class="site-info">
                    <h1 class="site-title">
                        <a rel="home" href="http://nilambar.com.np/blue-planet/">Blue Planet</a>
                    </h1>
                    <h2 class="site-description">Demo of Blue Planet</h2>
                </div>
            </div>
        </div>
    </header>
    <nav id="site-navigation" class="blueplanet-nav" role="navigation">
        <div class="menu-main-menu-container"><ul class="nav-menu" id="menu-top"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4" id="menu-item-4"><a href="http://nilambar.com.np/blue-planet/">Home</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24" id="menu-item-24"><a href="http://nilambar.com.np/blue-planet/pages/sample-page/">Sample Page</a></li>
        </ul></div>
    </nav>
</div>

Answer 1

如果您使用的是position: absolute;，那么您可以查看z-index CSS 属性。您可以在页面之外设置不同的“高度”（这是第三个轴）。这样，您首先可以让导航栏显示在其他所有内容之上。

这是一些示例 CSS：

nav {
    //whatever else you want to have here
    position: absolute;
    z-index: 10;
}
header img {
    //whatever else you want
    position: absolute;
    z-index: 9;
}

header的z-index为9，小于nav，表示页面渲染时会放在图片上方。

如果这不起作用，我会尝试将您的标题的背景设置为图像。

Answer 2

CSS：

.header-image-wrapper img {
position: relative;
}
.site-info {
position: absolute;
}

包含的 div 或 img 必须是相对的，而您想要的最上面的内容是绝对的。如果它落后于 img，请使用 z-index。 :D