Навбар исправлен в верхней части HTML-страницы (CSS / HTML)

html css html5 css3

50666 просмотра

5 ответа

2607 Репутация автора

Я пытаюсь изучить CSS3 и HTML5, но я немного запутался с некоторыми вещами. Сейчас я хочу создать страницу с фиксированной панелью навигации вверху страницы, которая прокручивается вместе со страницей.

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

Увидеть хотел дизайн ниже: Требуется дизайн

Текущий дизайн: Текущий дизайн

Ниже мой CSS:

body{
    left: 0;
    top: 0;
    margin: 0px;
    padding: 0px;
}

header.topbar{
    background-color: #f8f6f6;
    position: fixed;
    width: 100%;
    height: 100px;
    opacity: 0.7;
    z-index: 1;
    top: 0;
    left: 0;
}

#content{
    z-index: 0;
    position: absolute;
}

И мой HTML:

<!DOCTYPE HTML>
<html>
<head>
    <title> Test </title>
    <meta name="description" content="página de teste.">
    <link rel="stylesheet" type="text/css" href="stylesheet/style.css"/>
</head>
<body>

        <header class="topbar">
            test
        </header>

        <p>another test</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/>
        <p>again</p>

</body>

Итак, что я могу сделать, чтобы решить мою проблему? Пожалуйста, попробуйте ответить с помощью CSS, я действительно не хочу изучать JavaScript / jQuery в данный момент.

Спасибо!

Автор: Paladini Источник Размещён: 27.08.2013 01:08

Ответы (5)


7 плюса

88670 Репутация автора

Решение

Добавьте margin-top к своему контенту. Заголовок является фиксированным - поэтому он не включен в поток документа.

Также обратите внимание, что у вас есть непрозрачность, определенная в вашем заголовке - что заставляет вас немного видеть содержимое при прокрутке.

Если это не то, что вы хотели - тогда удалите его. ( вроде так )

FIDDLE

#content{
    margin-top: 100px;
    z-index: 0;
    position: absolute;
}
Автор: Danield Размещён: 27.08.2013 01:14

1 плюс

1081 Репутация автора

Что вам нужно использовать position: fixed;

/* Tell body leave a 40px gap at the top for the navigation when the page is scrolled to the top */
body { position: relative; padding-top: 40px; }
/* Tell the nav to stick to the top left */
nav { position: fixed; top: 0; left: 0; }

http://jsfiddle.net/ninty9notout/8J7UM/

Автор: ninty9notout Размещён: 27.08.2013 01:17

1 плюс

4308 Репутация автора

оберните содержимое с помощью div и дайте ему отступ в 100px (высота заголовка)

согласно моей структуре

.bodyPan{
    padding-top:100px;
}

рабочий файл jsFiddle

Автор: Roy Sonasish Размещён: 27.08.2013 01:17

1 плюс

2038 Репутация автора

Элементы с «фиксированной» или «абсолютной» позицией не занимают места на странице, поэтому возможный обходной путь для вас - добавить поле или отступы для вашего контента:

<article id='content'>
    <p>another test</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/>        <br/><br/><br/><br/><br/><br/><br/>
    <p>again</p>
<article>


#content{
    margin-top: 100px;
}

http://jsfiddle.net/KUpnA/

Автор: Eduardo Wada Размещён: 27.08.2013 01:26

1 плюс

26 Репутация автора

Дайте маржу вашему контенту. Значение поля должно быть высотой вашего заголовка (липкий заголовок) + 20px.

Автор: Vikas Singhal Размещён: 28.08.2013 08:54
Вопросы из категории :
32x32