Css z索引不使用li psuedo元素

grrrrrrrrr，我已经为此挣扎了一段时间。 我尝试创建一个带有连接器的进度条，我希望连接器位于我拥有的圆圈下，当圆圈处于class

活动状态时，会显示连接器，我希望避免它。
看看我的小提琴


/*自定义字体*/
@导入url(http://fonts.googleapis.com/css?family=Montserrat);
身体{
字体系列：蒙特塞拉特、arial、verdana；
保证金：0；
填充：0；
背景图片：url（“Capture.PNG”）；
}
.莫代尔{
位置：固定；
z指数：1000；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.4）；
}
.模态内容{
背景色：#fefe；
利润率：8%自动；
边框：1px实心#888；
宽度：662px；
身高：662px；
}
.模态标题{
高度：100px；
}
.右标题{
浮动：对；
宽度：50%；
}
#msform.formPage{
身高：662px；
填充：35px；
框大小：边框框；
位置：相对位置；
字体系列：Arial、Helvetica、无衬线字体；
}
/*隐藏除第一个字段集以外的所有字段集*/
#msform>.formPage~.formPage{
显示：无；
}
/*投入*/
#msform输入，#msform文本区域{
填充：15px；
边框：1px实心#ccc；
边界半径：3px；
边缘底部：10px；
宽度：100%；
框大小：边框框；
字体系列：蒙特塞拉特；
颜色：#2C3E50；
字体大小：13px；
}
/*钮扣*/
#msform.action按钮{
宽度：100px；
背景：#27AE60；
字体大小：粗体；
颜色：白色；
边界：0无；
边界半径：1px；
光标：指针；
填充：10px 5px；
利润率：10px 5px；
}
#msform.action按钮：悬停，#msform.action按钮：焦点{
盒影：0 2倍白色，0 0 3倍#27AE60；
}
/*标题*/
.fs标题{
字体大小：15px；
文本转换：大写；
颜色：#2C3E50；
边缘底部：10px；
}
.fs副标题{
字体大小：正常；
字体大小：13px；
颜色：#666；
边缘底部：20px；
} 
/*进度条*/
#进度条{
/*CSS计数器对步骤进行编号*/
计数器复位：步骤；
}
/*这是李圈*/
#李国宝{
反增量：步进；
宽度：27px；
高度：27px；
背景色：#dcdedf；
左边距：35px；
边界半径：50%；
列表样式类型：无；
浮动：左；
}
/*显示li号码*/
#李：以前{
内容：计数器（步骤）；
文本对齐：居中；
线高：26px；
显示：块；
颜色：白色；
}
/*progressbar连接器*/
#李：之后呢{
内容：“；
宽度：38px；
高度：10px；
背景色：#dcdedf；
位置：相对位置；
顶部：-18px；
左-36px；
显示：块；
z指数：-1；
}
#李：第一个孩子：之后{
/*第一步之前不需要接头*/
内容：无；
}
/*将活动/完成的步骤标记为绿色*/
/*台阶和台阶前的接头编号=绿色*/
#progressbar li.active，#progressbar li.active:之后{
背景#3395ff；
颜色：白色；
}
#李：第一个孩子{
左边距：0；
}
.结束{
颜色：#aaa；
浮动：对；
字体大小：24px；
填充：5px15px；
}
.关闭：悬停，.关闭：聚焦{
颜色：黑色；
文字装饰：无；
光标：指针；
}

x
添加新应用程序








创建您的帐户
这是第一步
社会概况
你在社交网络上的存在
个人资料
我们永远不会卖掉它
社会概况
你在社交网络上的存在
社会概况
你在社交网络上的存在
当使用
z-index


使用
z-index
时，它似乎工作正常


您需要设置直接父级的
z-index
，即
#progressbar
，使其高于其他父级

#progressbar {
  position: relative;
  z-index: 1;
}


/*自定义字体*/
@导入url(http://fonts.googleapis.com/css?family=Montserrat);
身体{
字体系列：蒙特塞拉特、arial、verdana；
保证金：0；
填充：0；
背景图片：url（“Capture.PNG”）；
}
.莫代尔{
位置：固定；
z指数：1000；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.4）；
}
.模态内容{
背景色：#fefe；
利润率：8%自动；
边框：1px实心#888；
宽度：662px；
身高：662px；
}
.模态标题{
高度：100px；
}
.右标题{
浮动：对；
宽度：50%；
}
#msform.formPage{
身高：662px；
填充：35px；
框大小：边框框；
位置：相对位置；
字体系列：Arial、Helvetica、无衬线字体；
}
/*隐藏除第一个字段集以外的所有字段集*/
#msform>.formPage~.formPage{
显示：无；
}
/*投入*/
#msform输入，
#msform文本区{
填充：15px；
边框：1px实心#ccc；
边界半径：3px；
边缘底部：10px；
宽度：100%；
框大小：边框框；
字体系列：蒙特塞拉特；
颜色：#2C3E50；
字体大小：13px；
}
/*钮扣*/
#msform.action按钮{
宽度：100px；
背景：#27AE60；
字体大小：粗体；
颜色：白色；
边界：0无；
边界半径：1px；
光标：指针；
填充：10px 5px；
利润率：10px 5px；
}
#操作按钮：悬停，
#动作按钮：焦点{
盒影：0 2倍白色，0 0 3倍#27AE60；
}
/*标题*/
.fs标题{
字体大小：15px；
文本转换：大写；
颜色：#2C3E50；
边缘底部：10px；
}
.fs副标题{
字体大小：正常；
字体大小：13px；
颜色：#666；
边缘底部：20px；
}
/*进度条*/
#进度条{
/*CSS计数器对步骤进行编号*/
计数器复位：步骤；
位置：相对位置；
z指数：1；
}
/*这是李圈*/
#李国宝{
反增量：步进；
宽度：27px；
高度：27px；
背景色：#dcdedf；
左边距：35px；
边界半径：50%；
列表样式类型：无；
浮动：左；
}
/*显示li号码*/
#李：以前{
内容：计数器（步骤）；
特克斯
#progressbar {
  position: relative;
  z-index: 1;
}