Идеальный способ сделать заголовок - PullRequest
Новая
       42

Идеальный способ сделать заголовок

0 голосов
/ 12 ноября 2018

Я создаю веб-приложение в Laravel, и у меня есть шаблон для элемента заголовка. То, что я хочу сделать, это сделать верхний колонтитул. У меня есть следующий код, чтобы сделать это: 

    .header{
    background-color: #ffffff;
    width: 100%;
    height: 10%;
    display: flex;
    padding: 0.2em 0.2em 0.2em 0.2em;
    font-family: "Viga";
    border: none;
    position: fixed;
   }

Но верхний колонтитул отображается внизу страницы, и моя верхняя граница для других элементов также не работает. Итак, как мне сделать верхний колонтитул зафиксированным сверху и при этом все остальные стили работают? Спасибо

Ответы [ 2 ]

0 голосов
/ 12 ноября 2018

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

Т.е. здесь высота заголовка равна 50px, поэтому оттолкните его от содержимого, указав margin-top:50px; содержимому.

Когда вы используете position:absolute; или position:fixed;, используйте top, left, right, bottom, чтобы указать свою позицию там, где вы хотите, чтобы она была

Попробуйте это 

    .header{
        background-color: #ffffff;
        width: 100%;
        min-height: 50px;
        display: flex;
        /*padding: 0.2em 0.2em 0.2em 0.2em;*/
        font-family: "Viga";
        border: none;
        position: fixed;
        top:0;
        left:0;
       }
       
    body{background:red; height:7000px;}
    .content{color:#fff; margin-top:50px;}
 <header class="header">
 <p>Header lays here!</p>
 </header>
 <div class="content">
 <h1>Content heading</h1>
 <p>content content content content content content contentcontentcontentcontent contentcontent content content content content content content content</p>
 </div>
0 голосов
/ 12 ноября 2018 

body{
    background-color: #7e797b;
    }
.header{
    background-color: #ffffff;
    width: 100%;
    display: flex;
    padding: 0.2em 0.2em 0.2em 0.2em;
    font-family: "Viga";
    border: none;
    position: fixed;
    left:0;
    top:0
   }
<html>
<head>
<body>
	<header class="header">		
    <h1>Header</h1>
	</header>
</body>
</head>
</html>
...