Html 为什么我的固定元素位于整个屏幕的右侧，而不是父元素的右侧？

我应用了一个显示我的问题的代码段。我试图使

.navigation

元素固定在彩色div的顶部，但是，对：0；使.navigation元素转到主体的右侧，而不是它的父元素容器。为什么会这样

*，
*：之后，
*：之前{
保证金：0；
填充：0；
-webkit框大小：边框框；
框大小：边框框；
文字装饰：无；
列表样式类型：无；
颜色：rgba（0,0,0,0.75）；
}
身体{
背景色：#f1f1；
字体系列：“Helvetica”，“Helvetica Neue”，“Arial”，无衬线；
线高：1.8rem；
}
.包装纸{
宽度：70%；
保证金：0自动；
}
.集装箱{
位置：相对位置；
}
.导航{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
位置：固定；
右：0；
}
.导航科{
填充：20px；
字号：600；
字体大小：1.3em；
}
部分{
高度：100vh；
}
.一{
背景色：红色；
}
.二{
背景颜色：蓝色；
}
.三{
背景颜色：绿色；
}

关于
项目
接触

位置

固定

始终相对于视口。您可以尝试将

sticky

与

float:right组合使用和<代码>顶部：0但此解决方案在IE上不起作用


*，
*：之后，
*：之前{
保证金：0；
填充：0；
-webkit框大小：边框框；
框大小：边框框；
文字装饰：无；
列表样式类型：无；
颜色：rgba（0,0,0,0.75）；
}
身体{
背景色：#f1f1；
字体系列：“Helvetica”，“Helvetica Neue”，“Arial”，无衬线；
线高：1.8rem；
}
.包装纸{
宽度：70%；
保证金：0自动；
}
.集装箱{
位置：相对位置；
}
.导航{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
/*修改部分：*/
位置：粘性；
浮动：对；
排名：0；
}
.导航科{
填充：20px；
字号：600；
字体大小：1.3em；
}
部分{
高度：100vh；
}
.一{
背景色：红色；
}
.二{
背景颜色：蓝色；
}
.三{
背景颜色：绿色；
}

关于
项目
接触
您正在寻找
一个不固定的
对象，但我希望该div在我滚动时保持固定。固定元素不能在div内。它会粘附在窗口上，不会粘附在HTML元素上。然后您正在寻找
粘性
位置我建议您更改问题，解释您想要什么，不要问什么为什么position fixed会这样做，因为存在大量重复项，这对您没有帮助