Question

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

这就是我想要的东西（受影响区域突出显示为红色）：我想要的是 WHAT I WANT

我希望红色标题处于固定位置，因为用户在Facebook或youtube上向下滚动页面。我已应用z-index：1; （目前它是页面上唯一的索引项）和一个位置：fixed;。这导致标题被修复和滚动，但我将它从页面顶部向下修复40-50px，这不是我想要的！见图：

我得到什么 WHAT I GET

显然，我错过了一些显而易见的东西，但是我试图找到它时撕裂了我的头发！

有人可以帮忙吗？

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

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

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

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

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

希望这有帮助！：）

Answer 2

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

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

Answer 3

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

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

Answer 4

你必须添加

#header{
   top:0
}

到你的css

并且还应该在body元素中添加padding-top:50px;以防止隐藏元素隐藏在固定标题后面

Answer 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;
}

Answer 6

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

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

位置：固定;工作不正常

6 个答案: