我正在尝试让我的页眉在滚动时保持在页面顶部，因此我使用了：
.header{
background-color: #8091F2;
color: white;
position: -webkit-sticky;
position: sticky;
top: 0px;
border-radius: 10px;
height: auto;
}
......但它只在页面下半部分停止“粘性”，具体而言是在：
<div class="container_1" id="speeds">
<div class="float_side">
<div class="container_2">
<table>
<tr>
<td colspan="3">
<h2>
Best Speed: Intel
</h2>
以下是我现有的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AMD Ryzen vrs Intel</title>
<link rel="stylesheet" type="text/css" href="./Fonts/stylesheet.css">
</head>
<body>
<div class="header">
<img class="pics" align="left" src="./images/amd.png">
<img class="pics" align="right" src="./images/intel.png">
<table class="center">
<tr><td> </td></tr>
<tr>
<td>
<a class="choicePadding" href="#speeds">Speeds</a>
</td>
<td>
<a class="choicePadding" href="#overclocking">Overclocking</a>
</td>
<td>
<a class="choicePadding" href="#cores">Cores</a>
</td>
<td>
<a class="choicePadding" href="#performance">Performance</a>
</td>
<td>
<a class="choicePadding" href="#price">Price</a>
</td>
</tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
</div>
<div class="container">
<p></p>
<table>
<tr>
<td colspan="3">
<h2>AMD vs Intel: Who Makes the Better CPU?</h2>
<p>
The AMD vs Intel debate has been getting more intense in the past couple of years. Different models from the two manufacturers have different clock speeds, core counts, and other specifications. But once you know what you’re looking for, and what each manufacturer has to offer, the decision-making process will be a whole lot easier. Here’s everything you need to know about the difference between AMD and Intel CPUs, and which one you should buy.
</p>
<p>
When it comes to AMD vs Intel, it all depends on what kind of use you are. AMD is a good choice for entry- and mid-level users, while Intel makes the best premium chips for pro users. This is because Intel’s high-end chips are faster and more power-efficient than AMD’s.
</p>
<p>
For decades, Intel dominated AMD, and it was considered the brand leader in the CPU market. However, things turned around for AMD when they released the Ryzen 7 series, which was made to rival Intel’s Core i7 offerings.
</p>
<p>
AMD followed through with the launch of Ryzen 3 and 5 models. Their latest offering is the Ryzen 9 3950X, AMD’s first 16-core, 32-thread processor for mainstream use. In contrast, Intel offers the eight-core, 16-thread Core i9-9900K. The company touts it as “the best gaming processor in the world.” Intel’s Core X Processor Series has up to 18 cores and 36 threads, making it the perfect choice for high-end users who are into content creation.
</p>
</td>
</tr>
<tr>
<td>
<div class = movePic>
<img class="mid_pics" src="./images/amd_chip.png">
</div>
</td>
<td>
<img class="mid_pics" src="./images/intel_chip.png">
</td>
</tr>
</table>
</div>
<p></p>
<div class="container_1" id="speeds">
<div class="float_side">
<div class="container_2">
<table>
<tr>
<td colspan="3">
<h2>
Best Speed: Intel
</h2>
</td>
</tr>
<tr>
<td>
<p>
CPU performance is measured in terms of clock speed or clock rate. This number is expressed in gigahertz (GHz), and it tells you how fast the CPU can process data. A higher clock rate means that the CPU can perform tasks better. However, other factors like the number of cores and how fast the CPU can process instructions can also affect CPU performance.
</p>
</td>
<tr>
<td>
<p>
When it comes to speed difference, the AMD vs Intel war is close for entry-level and mid-range products. For entry-level CPUs, Ryzen 3 models are almost just as fast as Intel CPUs. The Core i38350K, for instance, has the highest clock rate in this series at 4.0 GHz, while the Ryzen 3 2300X and 220G models offer a comparable speed of 3.5 GHz. Clock speeds for mid-range AMD processors start at 3.1 GHz with the Ryzen 5 2600E. In comparison, Intel starts at a lower 1.7 GHz with the Core i5 8500T.
</p>
</td>
</tr>
<tr>
<td>
<p>
Intel does offer higher clock speeds for its high-end Core i7 and i9 chips. There are models in the i9 series that have comparable speeds with their Ryzen Threadripper counterparts. However, for this line, Ryzen CPUs are more power-hungry than Intel’s. So, if you want a high-end CPU that performs at high speeds, but is also power-efficient, it is best to go with Intel.
</p>
</td>
</tr>
</table>
</div>
</div>
<div class="float_side">
<div class="container_3">
<center>
<img src="./images/speeds.jpg" class="statpics">
</center>
</div>
</div>
</div>
</body>
</html>
这里是CSS文件：
html{
scroll-behavior: smooth;
}
body{
background-color: #231B40;
height: auto;
}
h2{
text-align: center;
color: #3c67dc;
}
.pics{
width: 145px;
height: 80px;
padding-top: 10px;
padding-left: 10px;
padding-right: 25px;
}
.mid_pics{
width: 300px;
height: 300px;
}
.movePic{
text-align: right;
}
.statpics{
width: 500px;
height: 725px;
}
.container{
background-color: #151426;
font-family: 'PT Sans Regular', sans-serif;
padding-left: 65px;
padding-right: 65px;
color: #BCB4D9;
font-size: 18pt;
border-radius: 10px;
}
.container_1{
font-family: 'PT Sans Regular', sans-serif;
color: #BCB4D9;
font-size: 18pt;
border-radius: 10px;
padding: 20px;
height: auto;
}
.container_2{
background-color: #151426;
padding: 53px;
border-radius: 10px;
height: auto;
}
.container_3{
background-color: #151426;
padding: 65px;
border-radius: 10px;
height: auto;
}
.float_side{
float: left;
width: 45%;
padding: 20px;
height: auto;
}
.header{
background-color: #8091F2;
color: white;
position: -webkit-sticky;
position: sticky;
top: 0px;
border-radius: 10px;
height: auto;
}
.choicePadding{
font-family: 'PT Sans Regular', sans-serif;
padding-left: 65px;
padding-right: 65px;
color: white;
font-size: 18pt;
}
.center{
margin-left: auto;
margin-right: auto;
}
a:link{
text-decoration: none;
}
a:visited{
text-decoration: none;
}
a:hover{
text-decoration: none;
color: #3c67dc;
}
@font-face {
font-family: 'PT Sans Narrow';
src: url('fonts/PTSansNarrow-Bold.eot');
src: url('fonts/PTSansNarrow-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/PTSansNarrow-Bold.woff2') format('woff2'),
url('fonts/PTSansNarrow-Bold.woff') format('woff'),
url('fonts/PTSansNarrow-Bold.ttf') format('truetype'),
url('fonts/PTSansNarrow-Bold.svg#PT Sans Narrow') format('svg');
font-family: 'PT Sans Regular';
src: url('fonts/PTSansNarrow-Regular.eot');
src: url('fonts/PTSansNarrow-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/PTSansNarrow-Regular.woff2') format('woff2'),
url('fonts/PTSansNarrow-Regular.woff') format('woff'),
url('fonts/PTSansNarrow-Regular.ttf') format('truetype'),
url('fonts/PTSansNarrow-Regular.svg#PT Sans Narrow') format('svg');
}
如果有人知道为什么它在页面的这个位置停止粘性，请告诉我，谢谢。