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

CSS：

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

包含div或img必须是相对的，你想要的是绝对的。如果它落后于img使用z-index。：d

Answer 2

如果您使用的是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;
}

标题的z-index为9，小于nav的{{1}}，这意味着在呈现页面时它将位于图像的顶部。

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

如何在图像上定位网站名称和标题

2 个答案: