Html 当我向右滚动时，如何防止元素移动？

因此，我将右侧的页眉和页脚设置为固定位置。当我上下滚动时，效果非常好，但当我向右滚动时，元素也会向右移动，这是我不想要的。我只想让这些元素保持在一个垂直的位置，后面有蓝色的背景

正文{
背景图片：url(https://images.unsplash.com/photo-1460602594182-8568137446ce?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=1355&q=80）；
背景重复：无重复；
背景位置：90%5%；
背景大小：100%；
}
.个人资料图像{
宽度：200px；
高度：200px；
位置：相对位置；
左：750px；
顶部：300px；
边框：7px实心#A9A9；
边界半径：200px；
转变：转变1s；
}
.profile图像：悬停{
变换：旋转（360度）；
转变：转变1s；
}
.name span{
颜色：橙色；
位置：相对位置；
}
.姓名{
位置：相对位置；
左：550px；
顶部：330px；
字体大小：50px；
颜色：白色；
字体系列：“Lexend Zetta”，无衬线；
}
.标题背景{
背景色：#000033；
高度：500雷姆；
左：0；
位置：绝对位置；
排名：0；
宽度：18rem；
}
人力资源{
颜色：#3d5c；
左：0；
位置：固定；
顶部：6rem；
宽度：17.9雷姆；
}
.标题链接a{
颜色：#cccfc2；
显示：块；
字体系列：“卡拉”，无衬线；
字号：1.2rem；
填充：1.5雷姆；
位置：相对位置；
左：1rem；
底部：4rem；
文字装饰：无；
文本转换：大写；
}
.标题链接{
位置：固定；
}
.标题链接a:悬停{
颜色：橙色；
}
.页脚侧链接a{
颜色：白色；
填充：0.3rem；
}
.页脚侧链接a:悬停{
颜色：橙色
}
.页脚侧链接{
左：3rem；
位置：固定；
顶部：50雷姆；
}

我的投资组合
约翰约翰逊

您必须使用父div

位置

作为

固定

而不是单个元素 使用

overflow-x:hidden禁用水平滚动

.wrapper{
 height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 18rem; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
  }


正文{
背景图片：url(https://images.unsplash.com/photo-1460602594182-8568137446ce?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=1355&q=80）；
背景重复：无重复；
背景位置：90%5%；
背景大小：100%；
}
.个人资料图像{
宽度：200px；
高度：200px；
位置：相对位置；
左：40%；
边框：7px实心#A9A9；
边界半径：200px；
转变：转变1s；
}
.profile图像：悬停{
变换：旋转（360度）；
转变：转变1s；
}
.name span{
颜色：橙色；
位置：相对位置；
}
.姓名{
位置：相对位置；
左：27%；
顶部：14px；
字体大小：50px；
颜色：白色；
字体系列：“Lexend Zetta”，无衬线；
}
.标题背景{
背景色：#000033；
高度：500雷姆；
左：0；
位置：绝对位置；
排名：0；
宽度：18rem；
}
人力资源{
颜色：#3d5c；
左：0；
位置：固定；
顶部：6rem；
宽度：17.9雷姆；
}
.标题链接a{
颜色：#cccfc2；
显示：块；
字体系列：“卡拉”，无衬线；
字号：1.2rem；
填充：1.5雷姆；
位置：相对位置；
左：1rem；
底部：4rem；
文字装饰：无；
文本转换：大写；
}
.header链接{
宽度：63%；
左边距：自动；
右边距：自动；
}
.包装纸{
高度：100%；/*全高：如果需要“自动”高度，请删除此选项*/
宽度：17%；/*设置侧边栏的宽度*/
位置：固定；/*固定侧边栏（在滚动条上保持在位）*/
z指数：1；/*保持在顶部*/
顶部：0；/*保持在顶部*/
左：0；
背景色：#111；/*黑色*/
溢出-x:隐藏；/*禁用水平滚动*/
填充顶部：20px；
}
.标题链接a:悬停{
颜色：橙色；
}
.页脚侧链接a{
颜色：白色；
填充：0.3rem；
}
.页脚侧链接a:悬停{
颜色：橙色
}
.页脚侧链接{
宽度：34%；
左边距：自动；
右边距：自动；
}
.集装箱{
宽度：83%；
溢出x：隐藏；
左边距：282px；
}

我的投资组合
约翰约翰逊
您必须使用父div
位置
作为
固定
而不是单个元素
使用
overflow-x:hidden禁用水平滚动

.wrapper{
 height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 18rem; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
  }


正文{
背景图片：url(https://images.unsplash.com/photo-1460602594182-8568137446ce?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=1355&q=80）；
背景重复：无重复；
背景位置：90%5%；
背景大小：100%；
}
.个人资料图像{
宽度：200px；
高度：200px；
位置：相对位置；
左：40%；
边框：7px实心#A9A9；
边界半径：200px；
转变：转变1s；
}
.profile图像：悬停{
变换：旋转（360度）；
转变：转变1s；
}
.name span{
颜色：橙色；
位置：相对位置；
}
.姓名{
位置：相对位置；
左：27%；
顶部：14px；
字体大小：50px；
颜色：白色；
字体系列：“Lexend Zetta”，无衬线；
}
.标题背景{
背景色：#000033；
高度：500雷姆；
左：0；
位置：绝对位置；
排名：0；
宽度：18rem；
}
人力资源{
颜色：#3d5c；
左：0；
位置：固定；
顶部：6rem；
宽度：17.9雷姆；
}
.标题链接a{
颜色：#cccfc2；
显示：块；
字体系列：“卡拉”，无衬线；
字号：1.2rem；
填充：1.5雷姆；
位置：相对位置；
左：1rem；
底部：4rem；
文字装饰：无；
文本转换：大写；
}
.header链接{
宽度：63%；
左边距：自动；
右边距：自动；
}
.包装纸{
高度：100%；/*全高：如果需要“自动”高度，请删除此选项*/
宽度：17%；/*设置侧边栏的宽度*/
位置：固定；/*固定侧边栏（在滚动条上保持在位）*/
z指数：1；/*S
.profile {
  text-align: center;
  margin-left: 290px;
  margin-top: 250px;
}

.profile-image {
  width: 200px;
  height: 200px;
  position: relative;
  border: 7px solid #A9A9A9;
  border-radius: 200px;
  transition: transform 1s;
}

.name {
  position: relative;
  font-size: 50px;
  color: white;
  font-family: 'Lexend Zetta', sans-serif;
}

.header-links {
  position: fixed;
  top: 300px;
}