位置：固定；无法正常工作答案

【问题标题】：Position: Fixed; Not working properly位置：固定；无法正常工作
【发布时间】：2017-09-09 22:27:33
【问题描述】：

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

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

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

我得到了什么

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

谁能帮忙？

在下面查看我的 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>

【问题讨论】：

如果我的回答有效，请接受我的回答：D

标签： html css position fixed

【解决方案1】：

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

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

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

希望这会有所帮助！ :)

【讨论】：

太棒了。谢谢大家。你所有的答案的混合导致了我想要的。然后还有一个问题，当我的左列不在时，我的右列仍然在标题后面，但我已经用边距解决了这个问题。
您可以随时更改z-index 的值吗？ :)

【解决方案2】：

尝试将 top: 0; 添加到 css 文件中的标头 ID。由于您的标题不知道放置在哪里。这将使从页眉到页面顶部的距离为零，从而解决您的问题

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

【讨论】：

太棒了。谢谢大家。你所有的答案的混合导致了我想要的。然后还有一个问题，当我的左列不在时，我的右列仍然在标题后面，但我已经用边距解决了这个问题。

【解决方案3】：

你必须添加

#header{
   top:0
}

到你的 CSS

您还应该在正文元素中添加padding-top:50px;，以防止将元素隐藏在固定标题后面

【讨论】：

太棒了。谢谢大家。你所有的答案的混合导致了我想要的。然后还有一个问题，当我的左列不在时，我的右列仍然在标题后面，但我已经用边距解决了这个问题。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

为了得到你想要的，你应该有一个容器来存放除标题之外的所有东西，这是 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>

新容器的顶部应该有一个空格，与标题一样高，并且#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;
}

【讨论】：

太棒了。谢谢大家。你所有的答案的混合导致了我想要的。然后还有一个问题，当我的左列不在时，我的右列仍然在标题后面，但我已经用边距解决了这个问题。
太棒了。我建议你使用 Chrome Inspect 工具。可视化您的 css 并节省大量时间非常有用。

【解决方案6】：

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

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

【讨论】：