位置：固定；工作不正常

Question

我刚开始编码，在尝试使用 position: fixed 时遇到了一些问题运行；在 CSS 我的一次练习中。

这就是我想要的样子（受影响的区域突出显示为红色）：我想要的是

我希望红色 header 在用户向下滚动页面时处于固定位置，就像在 facebook 或 youtube 上一样。我申请了 z-index: 1; （目前它是页面上唯一的索引项）和一个位置：固定；。这导致 header 被修复并按我想要的方式滚动，但它修复了它从页面顶部向下 40-50 像素，这不是我想要的！在这里查看图片：

我得到了什么

显然我遗漏了一些明显的东西，但我正在努力寻找它！

有人能帮忙吗？

查看下面我的 HTML 和 CSS 代码。

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

#container {
}

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

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

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

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

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

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

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

Answer 1

尝试将 top: 0; 添加到 css 文件中的 header id。因为你的 header 不知道放在哪里。这将使 header 到页面顶部的距离为零，从而解决您的问题

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

Answer 2

您必须指定 div 在页面上的位置。将 top: 0px; 添加到您的 CSS:

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

相应地编辑0px，直到您发现它位于您想要的位置。

希望对您有所帮助！ :)

Answer 3

您必须添加

#header{
   top:0
}

给你的css

并且您还应该向 body 元素添加一个 padding-top:50px; 以防止隐藏固定 header

后面的元素

Answer 4

要得到你想要的东西，你应该有一个容器来容纳除 header 之外的所有东西，这是 HTML:

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

新容器的顶部应该有一个 space，和你的 header 一样高，#header 必须有 "top:0;" 才能工作，所以你可以试试这个：

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


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

Answer 5

是的，我检查了你的代码，你只需要替换这个 header css 代码

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

Answer 6

以下几行解决了我的问题：

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

位置：固定；工作不正常

Position: Fixed; Not working properly

html

css

position

fixed