Question

我正在开发一个包含徽标和菜单的网站。情况是我想在页面顶部和滑块上添加这些项目，就像第一张图片一样。徽标是透明的图像。因此它希望将滑块图像显示为滑块的背景作为第二个图像。

我在这里使用了bootstrap 3.

这是html的结构。

<body>
<header>
    <div class="row">
    <div class="col-md-2">
        //logo image
    </div>
    <div class="col-md-3"">                 
          <nav class="navbar navbar-default" role="navigation"></nav>                                          
    </div>

    </div>
</header>
<div class="row">
        <div class="container-fluid">
       //slider
</div>
</div>
</body>

CSS

Logo css -

.banner-img {
overflow: visible;
z-index: 10000;
float: left;
position: absolute;
}

菜单css -

.menu {
background: #f7f6f0;
padding: 0;
float: right;
width: 100%;
}

图片01

任何人都可以帮我解决这个问题吗？

Answer 1

<强> HTML

<div id="logo">
    <img src="http://skymaiden.com/placeholder.php" alt="" />
</div>
<nav>Menu</nav>
<div id="slider"></div>

<强> CSS

#logo {
    position:absolute;
    z-index-999;
    top:0;
    left:0;
}
nav {
    width:100%;
    height:35px;
    line-height:35px;
    background:green;
    color:#ffffff;
    font-weight:bold;
    text-align:right;
}
#slider {
    width:100%;
    height:200px;
    background:pink;
}

Fiddle Demo

Answer 2

只需为徽标添加css z-index，并将col-md-3更改为col-mod-10

如何在html中添加图像上的徽标和菜单

2 个答案: