Позиция: исправлена; Не работает должным образом

Я только начал кодирование и столкнулся с некоторыми проблемами при попытке использовать позицию: исправлено; в CSS во время одной из моих практических сессий.Позиция: исправлена; Не работает должным образом

Это то, что я хочу, чтобы выглядеть (пораженный участок выделен красным цветом): ЧТО Я ХОЧУ WHAT I WANT

Я хочу красный заголовок, чтобы быть в фиксированном положении, как и прокрутке вниз страницы, как на facebook или youtube. Я применил z-index: 1; (так как в настоящее время он является единственным индексированным элементом на странице) и позиция: fixed ;. Это приводит к тому, что заголовок фиксируется и прокручивается, как я хочу, но он исправляет его на 40-50 пикселей вниз от верхней части страницы, чего я не хочу! Смотрите изображение здесь:

ЧТО Я МОГУ ПОЛУЧИТЬ WHAT I GET

Очевидно, я что-то не хватает, но очевидно, я рву на себе волосы, пытаясь найти его!

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

См. Мой код HTML и CSS ниже.

body{ 
 
\t margin: 0px; 
 
\t background-color: #dddddd; 
 
} 
 

 
#container { 
 
} 
 

 
#header { 
 
\t background-color: red; 
 
\t width: 100%; 
 
\t height: 50px; 
 
\t position: fixed; 
 
\t z-index: 10; 
 
} 
 

 
#video { 
 
\t background-color: #ffffff; 
 
\t width: 650px; 
 
\t height: 400px; 
 
\t float: left; 
 
\t margin: 5px; 
 
\t margin-left: 120px; 
 
\t margin-top: 50px; 
 
\t margin-bottom: 35px; 
 
} 
 

 
#description { 
 
\t background-color: #ffffff; 
 
\t width: 650px; 
 
\t height: 200px; 
 
\t float: left; 
 
\t margin: 5px; 
 
\t margin-left: 120px; 
 
\t margin-bottom: 35px; 
 
} 
 

 
#comments { 
 
\t background-color: #ffffff; 
 
\t width: 650px; 
 
\t height: 400px; 
 
\t float: left; 
 
\t margin: 5px; 
 
\t margin-left: 120px; 
 
\t margin-bottom: 35px; 
 
} 
 

 
#rightadbox { 
 
\t background-color: #ffffff; 
 
\t width: 350px; 
 
\t height: 100px; 
 
\t margin: 5px; 
 
\t margin-top: 50px; 
 
\t margin-left: 800px; 
 
\t margin-bottom: 35px; 
 
} 
 

 
#right { 
 
\t background-color: #ffffff; 
 
\t width: 350px; 
 
\t height: 1000px; 
 
\t margin: 5px; 
 
\t margin-left: 800px; 
 
\t margin-bottom: 35px; 
 
} 
 
#footer { 
 
\t background-color: blue; 
 
\t width: 100%; 
 
\t height: 100px; 
 
\t clear: both; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 
\t <head> 
 
\t \t <!--PUT CSS LINK HERE--> 
 
\t \t <link rel="stylesheet" type="text/css" href="PracticeHTMLCSS.css"/> 
 
\t \t <title>Practice HTML</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="container"> 
 
\t \t \t <div id="header"> 
 
\t \t \t </div> 
 
\t \t \t <div id="video"> 
 
\t \t \t </div> 
 
\t \t \t <div id="description"> 
 
\t \t \t </div> 
 
\t \t \t <div id="comments"> 
 
\t \t \t </div> 
 
\t \t \t <div id="rightadbox"> 
 
\t \t \t </div> 
 
\t \t \t <div id="right"> 
 
\t \t \t </div> 
 
\t \t \t <div id="footer"> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </body> 
 
</html>

источник

2016-06-05 Tom Jardine-Smith

Если мой ответ работает, Примите мой ответ: D – Colourfit

Попробуйте добавить top: 0; К вашему заголовка идентификатора в файле CSS. Поскольку ваш заголовок не знает, где разместить. Это позволит сделать расстояние от заголовка к верхней части страницы ноль, следовательно, решение вашей проблемы

#header { 
    background-color: red; 
    width: 100%; 
    height: 50px; 
    position: fixed; 
    z-index: 10; 
    top: 0; <-- 
}

источник

2016-06-05 12:13:12 Colourfit

Удивительный. Спасибо всем. Сочетание всех ваших ответов привело к тому, что я хотел. Затем была еще одна проблема, когда моя правая колонка все еще стояла за заголовком, когда мой левый столбец не был, но я исправил это с полями. –

Вы должны указать, где вы хотите, чтобы DIV быть на этой странице. Добавить top: 0px; в свой CSS:

#header { 
    background-color: red; 
    width: 100%; 
    height: 50px; 
    position: fixed; 
    top: 0px; 
    z-index: 10; 
}

Редактировать 0px соответствующим образом, пока вы не обнаружите, что она находится в том месте, вы хотите.

Надеюсь, это поможет!:)

источник

2016-06-05 12:15:42 Cyph

Awesome. Спасибо всем. Сочетание всех ваших ответов привело к тому, что я хотел. Затем была еще одна проблема, когда моя правая колонка все еще стояла за заголовком, когда мой левый столбец не был, но я исправил это с полями. –

Вы всегда можете изменить значение 'z-index'? :) – Cyph

Вы должны добавить

#header{ 
    top:0 
}

к вашему CSS

и вы также должны добавить padding-top:50px; к вашему телу элемента для предотвращения сокрытия элементов позади фиксированного заголовка

источник

2016-06-05 12:22:05

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

<!DOCTYPE HTML> 
 
<html> 
 
\t <head> 
 
\t \t <!--PUT CSS LINK HERE--> 
 
\t \t <link rel="stylesheet" type="text/css" href="PracticeHTMLCSS.css"/> 
 
\t \t <title>Practice HTML</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="container"> 
 
\t \t \t <div id="header"> 
 
\t \t \t </div> 
 
\t \t \t 
 
      <div id="sitebody"><!-- body container --> 
 
      <div id="video"> 
 
\t \t \t </div> 
 
\t \t \t <div id="description"> 
 
\t \t \t </div> 
 
\t \t \t <div id="comments"> 
 
\t \t \t </div> 
 
\t \t \t <div id="rightadbox"> 
 
\t \t \t </div> 
 
\t \t \t <div id="right"> 
 
\t \t \t </div> 
 
\t \t \t <div id="footer"> 
 
\t \t \t </div> 
 
      </div><!-- // END body container --> 
 
\t \t </div> 
 
\t </body> 
 
</html>

Новый контейнер должен иметь место в верхней части, как высота, как ваш заголовок и #header должен иметь «верх: 0;» для того, чтобы работать, так что вы могли бы попробовать с этим:

#sitebody { 
 
\t position:relative; 
 
    margin-top:70px; /** you can change this **/ 
 
} 
 

 

 
#header { 
 
    background-color: red; 
 
    width: 100%; 
 
    height: 50px; 
 
    position: fixed; 
 
    top:0; /*** POSITION FIXED INTRUCTIONS ***/ 
 
\t z-index: 10; 
 
}

источник

2016-06-05 12:26:12

Отлично. Я предлагаю вам использовать инструмент Chrome Inspect. Полезно визуализировать ваш css и сэкономить много времени. –

да проверить свой код, вам нужно всего лишь заменить этот заголовок кода CSS

#header { 
background-color: red; 
width: 100%; 
height:100px; 
position: fixed; 
top:0px; 
}

источник

2016-06-05 12:37:22

строки ниже исправлена моя проблема:

position: fixed; 
top: 0px; 
z-index: 10;

источник

2017-09-09 14:08:34

Позиция: исправлена; Не работает должным образом

ответ

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