Плавающий заголовок при использовании нескольких таблиц стилей

У меня есть вопрос о плавающих заголовках.Плавающий заголовок при использовании нескольких таблиц стилей

В настоящее время я работаю с двумя CSS-файлов, bootstrap.min.css и main.css, причем последний пользовательский файл, содержащий следующие

* { 
    margin: 0; 
    padding: 0; 
} 

#heading { 
    padding: 0; 
    margin: 0; 
    border: 0; 
    background-color: #acc7dc; 
    height: 10%; 
    width: 100%; 
    z-index: 10; 
    position: fixed; 
    font-family: 'Merriweather', serif; 
    text-align: center; 
}

, который в меру моего понимания должен начать блок заголовка в очень верх экрана. Однако иногда при тестировании HTML есть пробел между верхней частью экрана и заголовком.

HTML-структурирована следующим образом:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="../static/main.css" > 
     <link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'> 
     <title>Trial</title> 
    </head> 
    <body> 
     <div id="heading"> 
      <header> 
       <h1>Trial</h1> 
      </header> 
     </div> 
    </body> 
</html>

Я не изменить это поведение в другом месте. Есть идеи, что может быть проблемой?

источник

2016-03-06 Willbur Smith

настройки 'верха: 0px важно,' для заголовка не может помочь, но! возможно, стоит попробовать. –

Поскольку вы используете Bootstrap, вы можете использовать класс .navbar-fixed-top, который должен исправить недостаток. Если вы хотите применить ваш собственный Styes к заголовку, вам просто нужно будет применять как класс и стиль ID:

<div class='navbar-fixed-top' id="heading"> 
    <header> 
     <h1>Trial</h1> 
    </header> 
</div>

источник

2016-03-07 02:39:25 Rarepuppers

Плавающий заголовок при использовании нескольких таблиц стилей

ответ

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