Html 将div锁定到屏幕顶部

我正试图将进度条锁定在页面顶部（类：outerDiv_），这样，如果用户向下滚动，他们将始终可以很好地查看他们的进度

我尝试过本帖中提出的各种解决方案，但都没有成功：

/*基本重置*/
*{边距：0；填充：0；}
.html_{
身高：100%；
}
.吐司{
不透明度：1！重要；
}
.身体{
最小高度：100%；
保证金：0；
背景重复：无重复；
背景附件：固定；
字体系列：蒙特塞拉特、arial、verdana；
背景色：黑色！重要；
}
.需求量{
顶部：-15px；
位置：相对位置；
}
.reqFieldText\u{
颜色：红色；
填充：0；
保证金：0；
}
.reqFieldStar\U{
字体大小：粗体；
}
.k按钮{
颜色：红色；
}
.按钮中心{
清除：左；
文本对齐：居中；
}
.outerDiv\S{
宽度：85%；
保证金：50px自动；
文本对齐：居中；
位置：固定；
}
#调查表格{
顶部：135px；
位置：相对位置；
宽度：85%；
保证金：50px自动；
文本对齐：左对齐；
}
#surveyForm字段集{
背景：白色；
边界：0无；
边界半径：3px；
盒影：0.15px 1px rgba（0,0,0,0.4）；
填充：20px 30px；
框大小：边框框；
宽度：80%；
利润率：0.10%；
}
/*投入*/
#surveyForm输入，#surveyForm文本区域{
填充：15px；
边框：1px实心#ccc；
边界半径：3px；
边缘底部：10px；
宽度：100%；
框大小：边框框；
字体系列：蒙特塞拉特；
颜色：#2C3E50；
字体大小：13px；
}
/*钮扣*/
#surveyForm.操作按钮{
文本对齐：居中；
宽度：100px；
背景：#27AE60；
字体大小：粗体；
颜色：白色；
边界：0无；
边界半径：1px；
光标：指针；
填充：10px 5px；
利润率：10px 5px；
}
#surveyForm.操作按钮：悬停，#surveyForm.操作按钮：聚焦{
盒影：0 2倍白色，0 0 3倍#27AE60；
}
#surveyForm.action按钮提交{
宽度：100px；
背景：#3498db；
字体大小：粗体；
颜色：白色；
边界：0无；
边界半径：1px；
光标：指针；
填充：10px 5px；
利润率：10px 5px；
}
/*对于不是调查表格一部分的吐司*/
.动作按钮ok{
宽度：100px；
背景：rgba（255，255，255，0.3）；
字体大小：粗体；
颜色：白色；
边界：0无；
边界半径：1px；
光标：指针；
填充：10px 5px；
利润率：10px 5px；
}
#surveyForm.action按钮提交：悬停，#surveyForm.action按钮提交：焦点{
盒影：0.2px白色，0.3px#3498db；
}
/*标题*/
.fs标题{
字体大小：15px；
文本转换：大写；
颜色：#2C3E50；
边缘底部：10px；
}
.fs副标题{
字体大小：正常；
字体大小：13px；
颜色：#666；
边缘底部：20px；
}
/*进度条*/
#进度条{
边缘底部：30px；
溢出：隐藏；
/*CSS计数器对步骤进行编号*/
计数器复位：步骤；
}
#李国宝{
列表样式类型：无；
颜色：白色；
文本转换：大写；
字体大小：9px；
/*宽度应为100除以步数*/
/*这是在javascript的代码中动态设置的*/
宽度：12.5%；
浮动：左；
位置：相对位置；
}
#李：以前{
内容：计数器（步骤）；
反增量：步进；
宽度：20px；
线高：20px；
显示：块；
字体大小：10px；
颜色：#333；
背景：白色；
边界半径：3px；
保证金：0自动5px自动；
}
/*progressbar连接器*/
#李：之后呢{
内容：''；
宽度：100%；
高度：2倍；
背景：白色；
位置：绝对位置；
左-50%；
顶部：9px；
z索引：-1；/*将其放在数字后面*/
}
#李：第一个孩子：之后{
/*第一步之前不需要接头*/
内容：无；
}
/*将活动/完成的步骤标记为绿色*/
/*台阶和台阶前的接头编号=绿色*/
#progressbar li.活动：之前，#progressbar li.活动：之后{
背景：#27AE60；
颜色：白色；
}
.k-下拉列表{
宽度：100%；
}
.k-state-selected.k-state-focused{
背景色：#27AE60；
边界：0；
}
#调查表{
边界：0；
身高：0；
边框顶部：1px实心rgba（0,0,0,0.1）；
边框底部：1px实心rgba（255、255、255、0.3）；
边缘底部：10px；
}
/*  https://stackoverflow.com/a/17541916/1550052   */
雷德先生，
.ckb{
光标：指针；
用户选择：无；
-webkit用户选择：无；
-webkit触摸标注：无；
填充：10px；
/*浮动：左*/
}
标签{
显示：块；
}
.rad>输入，
.ckb>输入{/*HIDE ORG RADIO&复选框*/
可见性：隐藏；
位置：绝对位置；
}
/*单选复选框样式（&T）*/
.rad>i，
.ckb>i{/*默认样式*/
显示：内联块；
垂直对齐：中间对齐；
宽度：16px；
高度：16px；
边界半径：50%；
过渡：0.2s；
框阴影：插入0 8px#fff；
边框：1px实心#D3；
背景:#666；
保证金权利：4px；
}
/*复选框覆盖样式*/
.ckb>i{
宽度：25px；
边界半径：3px；
}
.rad:hover>i{/*悬停样式*/
盒影：插入0 3px#fff；
背景:#666；
}
.rad>input:checked+i{/*（RADIO checked）样式*/
盒影：插入0 3px#fff；
背景：#27AE60；
}
/*复选框*/
.ckb>输入+i：之后{
内容：“；
显示：块；
高度：12px；
宽度：12px；
保证金：2倍；
边界半径：继承；
过渡：继承；
背景#d3；
}
.ckb>input:checked+i:after{/*（单选）样式*/
左边距：11px；
背景：#27AE60；
}

第一
第二
第三第四第五第六第七第八

*表示必填字段
标题












副标题



1.
业务类型


住宿



活动
联想
惯例
会议中心
游轮
目的地
目的地
事件
技术
运输
旅游
场馆

尝试添加

位置：固定；外挂

.outerDiv_S {
    position: fixed;
}

这样做的目的是保护di

.outerDiv_S {
    width: 85%;
    margin: 0px auto;
    text-align: center;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9999;
    padding-top: 80px;
    box-sizing: border-box;
    background-color: #000;
}

.containter {
display: block;
position: initial;
}

.h {
padding-top: 50px; 
}
.containcer {
display: block;
margin: -28px 0 0 0px;
position: absolute;
{