html - 将元素放入容器的问题

Question

我想把我的进度条放在一个容器里。但是当我出于某种原因创建容器时，进度条隐藏并且只有容器可见？! 我缺少什么？

这是没有容器的工作代码。 (容器有注释)

/* I tried to create a container here
.containerProgress{
  position: absolute;
  overflow: hidden;
  left: 10.2vw;
  top: 54vh;
  height: 23vh;
  width: 29vw;
  outline: 0.1vw dashed orange;
}
*/

#progress-bar {
  position: absolute;
  width: 0vw;
  height: 9.436435124508519vh;
  margin: 62.909567496723468vh 0vw 0vh  11.2119791666666659491vw;
  background: repeating-linear-gradient(-45deg, red, red 2.80299479166666659491vw, orangered 2.80299479166666659491vw, orangered 5.60598958333333297455vw);
  border-radius: 18vh;
  box-shadow: inset 0vw 7.8636959370904332vh 1.40149739583333318982vw rgba(255, 255, 255, 0.1), inset 0vw 0.7863695937090432vh 0vw rgba(255, 255, 255, 0.3), inset 0vw -3.9318479685452166vh 0.42044921875vw rgba(0, 0, 0, 0.2), 0vw 2.3591087811271296vh 0.280299479166666681018vw rgba(0, 0, 0, 0.3);
  left: -0.70074869791666659491vw;
  top: -3.9vh;
  width: 2.5vw;
}

#progress-bar:after {
  position: absolute;
  width: 30vw;
  height: 16vh;
  background: rgba(13, 13, 13, 0.7);
  border-radius: 18vh;
  content: "";  
  left: -0.70074869791666659491vw;
  top: -3.25vh;
  z-index: -1;
}

<div class="containerProgress">	
<div id="progress-bar"></div>
</div>

Answer 1

我对您的代码进行了一些测试，我认为这个 margin: 62.909567496723468vh 0vw 0vh 11.2119791666666659491vw; 将您的进度条推到视线之外。

尝试将 margin-top 和 margin-left 更改为 0。