Как добавить логотип и меню на изображение в html

Я разрабатываю сайт, содержащий логотип и меню. дело в том, что я хочу добавить эти элементы в верхней части страницы и на ползунок, как это первое изображение. логотип - прозрачное изображение. поэтому он хочет отображать изображение слайдера в качестве фона ползунка в качестве второго изображения.Как добавить логотип и меню на изображение в html

Я использовал бутстрап 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%; 
}

Image 01

Может ли кто-нибудь помочь мне решить эту проблему?

источник

2014-10-16 anuruddhika

Каков ваш текущий css? – LorDex

@LorDex я добавил css сейчас – anuruddhika

, вы можете использовать отрицательный margin-top для своей «контейнерной жидкости», чтобы перетащить ее под логотип. – Wavemaster

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

источник

2014-10-16 09:17:41 Aru

просто добавить CSS Z-индекса для логотипа, а также изменить COL-MD-3 для Col-мод -10

источник

2014-10-16 12:39:51

Как добавить логотип и меню на изображение в html

ответ

Смежные вопросы