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。

Answer 2

问题是您在父div上设置了margin: 62.909567496723468vh 0vw 0vh 11.2119791666666659491vw;和overflow: hidden，所以它被推到了不可见的地步。

.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: 0 auto;
  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);
  top: 50%;
  transform: translateY(-50%);
  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>

将元素放入容器的问题

2 个答案: