是否可以在CSS中使一个固定的身体不滚动？
问题描述：
我有一个矩阵背景的东西，功能齐全，但我只想让我的标题随着滚动移动，每当我将.content部分更改为不同的位置时，它会完全取消矩阵（矩阵不是实际上后台它更像是一切落后的区域。是否可以在CSS中使一个固定的身体不滚动？
<style type="text/css">
body{
margin:0px;
background:#000;
}
.header-cont {
width:100%;
position:fixed;
top:0px;
}
.header {
height:50px;
background:#000;
border:1px solid #0F0;
width:960px;
margin:0px auto;
}
.content {
\t overflow: hidden;
width:960px;
background: #000;
border: 1px solid #0F0;
height: 4000px;
margin: 70px auto;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tech Time</title>
<link href="../CSS/something.css" rel="stylesheet" type="text/css">
<link href="../CSS/canvas.css" rel="stylesheet" type="text/css">
<link href=".noscroll.css" rel="stylesheet" type="text/css">
<head>
<style type="text/css">
body{
margin:0px;
background:#000;
}
.header-cont {
width:100%;
position:fixed;
top:0px;
}
.header {
height:50px;
background:#000;
border:1px solid #0F0;
width:960px;
margin:0px auto;
}
.content {
\t overflow: hidden;
width:960px;
background: #000;
border: 1px solid #0F0;
height: 4000px;
margin: 70px auto;
}
</style>
</head>
<body>
<div class="header-cont">
<div class="header"></div>
\t <div class="content">
\t <table width="960" border="1">
\t <tbody>
\t <tr>
\t <td width="338" height="180"><img src="file:///home/146971/Desktop/bigstock-128312288-1024x794.jpg" width="338" height="180" alt=""/></td>
\t <td width="311" align="left" valign="top" style="color: #00FF00"><p style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif; font-weight: bold;">Juicero - Silicon Valleys Failure</p>
\t <p>By: <span style="font-style: italic">Alex Diaz</span>/<span style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif">April 24</span></p>
<p> </p>
<p style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif">Juice — yes, the beverage — has experienced a renaissance of late: Juice bars. Juice cleanses. Juices for enlightenment, juices for energy, juices that might just cure cancer...</p>
<p style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif; font-size: 10px;"> </p>
<p style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif; font-size: 10px;"> </p></td>
\t <td width="289" rowspan="3"> </td>
</tr>
\t <tr>
\t <td height="180"><img src="file:///home/146971/Desktop/watch.jpg" width="338" height="180" alt=""/></td>
\t <td align="left" valign="top" style="color: #00FF00; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif; font-weight: bold;"><p>Fitbit's upcoming smartwatch has reportedly been a giant mess!</p>
\t <p style="font-weight: normal">By: <span style="font-style: italic">Michael Esch</span>/May 2</p>
\t <p style="font-weight: normal"> </p>
\t <p style="font-weight: normal">Yahoo Finance has nabbed a couple of photos. Reported to show Fitbit’s upcoming smartwatch, along with a handful of reports that make the whole undertaking sound like one big fiasco...</p>
<p> </p></td>
</tr>
\t <tr>
\t <td height="180"><img src="file:///home/146971/Desktop/jive.jpg" width="338" height="180" alt=""/></td>
\t <td align="left" valign="top" style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif; font-weight: bold; color: #00FF00;"><p>Collaboration software company Jive to be aquired by Aurea for 462 million</p>
<p style="font-weight: normal; font-style: normal;">By: <span style="font-style: italic">Ivan Diaz</span>/May 2</p>
<p style="font-weight: normal; font-style: normal;"> </p>
<p style="font-weight: normal; font-style: normal;"> Jive, a community collaboration software company that was one of the biggest Enterprise 2.0-era success stories, going public in 2011, announced today it had agreed to be acquired by ESW...</p></td>
</tr>
\t <tr>
\t <td height="180"> </td>
\t <td align="left" valign="top" style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif; font-weight: bold; color: #00FF00;"> </td>
\t <td> </td>
</tr>
</tbody>
</table>
\t <p> </p>
</div>
</div>
<br><br><br>
<body>
<ul class="menu1">
<li></li>
<li><a href="HOME.html"> Home </a></li>
<li><a href="#">News</a>
\t
<ul>
\t <li><a href="Tech.html" class="documents">Tech</a></li>
<li><a href="Political.html" class="documents">World</a></li>
<li><a href="Science.html" class="documents">Science</a></li>
</ul>
</li> \t
<li><a href="#">Store</a>
<ul>
<li><a href="scom.html" class="documents">Computer</a></li>
<li><a href="sgad.html" class="messages">Gadget</a></li>
<li><a href="sran.html" class="signout">Random</a></li>
</ul>
</li>
<li><a href="#" class="menu2">Tutorials</a>
\t
<ul>
\t <li><a href="java.html" class="Java">Java</a></li>
<li><a href="css.html" class="Css">CSS</a></li>
<li><a href="html.html" class="HTML">HTML</a></li>
<li><a href="javascript.html" class="HTML">JavaScript</a></li>
<li><a href="elixer.html" class="HTML">Elixer</a></li>
<li><a href="swift.html" class="HTML">Swift</a></li>
\t </ul>
</li>
<li><a href="#">Videos</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
<head>
<canvas id="c"></canvas>
</head>
<body>
<script type="text/javascript" src="../JS/tech.js"></script>
</body>
</head>
</head>
</html>
答
你的问题是有点难以理解所以原谅我，如果这不是你想要的，但这里是一个小提琴，你可以看到如何修正您的标题顶部/左侧，以防止它滚动的内容：
.header {
height: 200px;
width: 100%;
background: red;
position: fixed;
top: 0;
left: 0;
}
.content {
height: 1000px;
margin-top: 200px;
background: green;
}
答
我不知道到底是什么你的意思是在这里，但如果你要的是固定的报头停留在上滚动页面的顶部，那么你应该试试这个。
.header {
height:50px;
background:#000;
border:1px solid #0F0;
width:960px;
position: fixed;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top:0;
}
测试了它上codepen保持固定，并在上滚动网页的顶部的中心位置。
只需要在header-cont上加绝对值 –