2016-02-10 2 views
0

Я хотел бы обернуть обложку баннера, но был под топом. К сожалению, вмешательство в zindex и позиции не помогло. Я понятия не имею, как это сделать правильно. I надеюсь, что я хорошо объяснил, что я имею в видуCSS: Как я могу изменить положение или индекс в моем коде

*{margin:0;padding: 0;border: 0;} 
 
body{text-align: center;} 
 

 
/*HEADER*/ 
 
.content{max-width:980px;margin: auto;height:100%; } 
 
header{width:100%;height:100px;position:fixed;z-index: 5;} 
 
#logo{font-size: 1.1em;font-family: 'Cabin', sans-serif;color:darkgray;float:left;text-transform: uppercase;font-weight: 700;display: inline} 
 
#logo>img{margin-right:10px;margin-top:30px;} 
 
nav{float:right;margin-top:50px;} 
 
nav>ul>li{display:inline;list-style: none; } 
 
nav>ul>li>a{margin-left:10px;text-decoration: none;font-size: 1.0em;font-family: 'Cabin', sans-serif;color:darkgray;text-transform: uppercase;} 
 

 
.baner{width:100%;height:530px;background: url('baner.png') repeat-x;position:fixed;top:115px;} 
 
.wrap{max-width:100%;margin: auto;top:800px;background: red; position:relative;}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <link href='https://fonts.googleapis.com/css?family=Cabin:700,400' rel='stylesheet' type='text/css'> 
 
</head> 
 
<body> 
 
    <header> 
 
    <div class="content"> 
 
    <div id="logo"><img src="logo.png" alt="">Treehouse</div> 
 
    <nav> 
 
     <ul> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Blog</a></li> 
 
      <li><a href="#">Portfolio</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
      
 
     </ul> 
 
    </nav> 
 
    </div> 
 
    </header> 
 
    <div class="baner"> 
 
     <h1></h1> 
 
     <h2></h2> 
 
     <section class="button"></section> 
 
    </div> 
 
    <div class="wrap"> 
 
     
 
     <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, et, repellat. Dicta sunt, eligendi, iusto et eveniet eum enim accusamus dignissimos tempora. Nihil modi, ex veritatis, maxime sequi unde possimus?</p> 
 
     </div> 
 
    <footer> 
 
     
 
    </footer> 
 
</body> 
 
</html>

Можете ли вы мне помочь?

+2

Вы должны были бы добавить больше контекста. Расскажите нам, что вы попробовали, и сообщите нам, что с этим не работает. Добавьте рисунок, если его трудно выразить словами. – unpollo

ответ

0

заголовок всегда должен быть виден, в то время как баннер скрывается под другую divem в этом случае «обертка» enter image description here

+0

ОК, я идиот, у заголовка не было фона ... – tom

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