Html 位置：固定；工作不正常

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

这就是我希望事情看起来的样子（受影响区域以红色突出显示）： 我想要什么

我希望当用户像在facebook或youtube上一样向下滚动页面时，红色标题处于固定位置。我应用了一个z指数：1；（因为目前它是页面上唯一的索引项）和位置：fixed；。这导致页眉被固定并按我的要求滚动，但它将其从页面顶部向下固定40-50px，这不是我想要的！如图所示：

我得到了什么

显然，我错过了一些明显的东西，但我正在拼命寻找它

有人能帮忙吗

请参阅下面我的HTML和CSS代码

正文{
边际：0px；
背景色：#dddddd；
}
#容器{
}
#标题{
背景色：红色；
宽度：100%；
高度：50px；
位置：固定；
z指数：10；
}
#录像带{
背景色：#ffffff；
宽度：650px；
高度：400px；
浮动：左；
保证金：5px；
左边距：120像素；
边缘顶部：50px；
边缘底部：35px；
}
#描述{
背景色：#ffffff；
宽度：650px；
高度：200px；
浮动：左；
保证金：5px；
左边距：120像素；
边缘底部：35px；
}
#评论{
背景色：#ffffff；
宽度：650px；
高度：400px；
浮动：左；
保证金：5px；
左边距：120像素；
边缘底部：35px；
}
#右边的盒子{
背景色：#ffffff；
宽度：350px；
高度：100px；
保证金：5px；
边缘顶部：50px；
左边距：800px；
边缘底部：35px；
}
#对{
背景色：#ffffff；
宽度：350px；
高度：1000px；
保证金：5px；
左边距：800px；
边缘底部：35px；
}
#页脚{
背景颜色：蓝色；
宽度：100%；
高度：100px；
明确：两者皆有；
}

实践HTML

尝试添加

顶部：0

到css文件中的头id。因为你的头不知道放在哪里。这将使页眉到页面顶部的距离为零，从而解决您的问题

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

#标题{
背景色：红色；
宽度：100%；
高度：50px；
位置：固定；
z指数：10；
top:0；必须指定div在页面上的位置。将
top:0px；
添加到CSS中：

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

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

希望这有帮助！：）
您必须添加

#header{
   top:0
}

到你的css

您还应该在body元素中添加一个
padding top:50px；
，以防止将元素隐藏在固定标题后面
要获得所需内容，您应该为除标题之外的所有内容提供一个容器，这是HTML：



练习HTML
是的，我检查您的代码，您只需要替换此标题css代码

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

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

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

如果我的答案有效，请接受我的答案：DAwesome。谢谢大家。你所有答案的混合产生了我想要的结果。然后还有一个问题，我的右栏仍然在标题后面，而我的左栏没有，但我已经用边距修复了这个问题。太好了。我建议你使用Chrome Inspect工具。这对于可视化你的css和保存很多时间。太棒了。谢谢大家。你所有的答案都混合在一起，得到了我想要的。然后还有一个问题，我的右栏仍然在页眉后面，而我的左栏没有，但我已经用页边空白修复了这个问题。太棒了。谢谢大家。你所有的答案混合在一起，得到了我想要的。然后还有一个问题，我的右栏仍然在页眉后面当我的左栏不在标题后面时，我的右栏仍然在标题后面，但我已经用页边空白修复了它。太棒了。谢谢大家。你所有的答案混合在一起，得到了我想要的结果。还有一个问题，当我的左栏不在标题后面时，我的右栏仍然在标题后面，但我用页边空白修复了它。你可以随时更改
z-Index
值？：）