Как наложить два div при использовании flexbox?

Question

Я использую родительский div, который является flexbox.внутри него мне требуются два дочерних элемента div, каждый из которых охватывает всю ширину родительского элемента div (width: 100%), так что они располагаются друг над другом (с наложением).Таким образом, когда вы изменяете ширину одного дочернего элемента div, он никоим образом не должен перемещать другой дочерний элемент div.

например: я пытаюсь создать такой индикатор прогресса, как показано ниже:

, для этого я использую два элемента div - внешнийdiv (серый фон), который отображает контур индикатора выполнения, и внутренний div (зеленый фон), который отображает прогресс.Мне также необходимо показать числовой процент в середине (81%).внутреннее значение ширины div (green bg) будет изменяться в зависимости от числового процента.Числовой процент всегда должен быть в центре OUTER DIV, независимо от прогресса (внутренняя ширина деления).

Не могли бы вы сказать мне, как этого можно достичь?Благодарю.

Answer 1

Для стилей базового индикатора выполнения, вы бы использовали position: absolute для наложения элементов.

Вы можете использовать flexbox для позиционирования, однако выd используйте меньше строк кода, просто используя position: absolute, и последующие правила в среднем тексте (например, «80%»), позволяя одновременно выполнять наложение и центрирование.

Для управления индикатором выполнения (динамически), вы должны использовать Javascript.Вы бы построили некоторую логику в JS, которая следит за прогрессом что-то , а затем соответствующим образом обновите правила CSS панели.Без JS нет способа сделать это.

Если вам просто нужен фиктивный индикатор выполнения с движением, то вы можете анимировать его без JS, используя правила CSS-анимации.

Codepen

#container {
  position: relative;
  width: 400px;
  height: 40px;
  background-color: grey;
  border: 2px solid black;
}

#text {
    position: absolute;
    top: 50%;  
    left: 50%;
    transform: translate(-50%,-50%); 
}

#fill {
  background-color: green;
  width: 80%;
  height: 100%;
}

<div id="container">
  <div id="text">80%</div>
  <div id="fill">&nbsp;</div>
</div>

Answer 2

Не нужно flexbox или каких-либо сложных вещей, вы можете просто использовать фон для этого:

.progress {
  width:200px;
  line-height:50px;
  margin:5px;
  text-align:center;
  font-size:30px;
  background:
    linear-gradient(green,green) left no-repeat,
    grey;
}

<div class="progress">
  100%
</div>

<div class="progress" style="background-size:50% 100%">
  50%
</div>

<div class="progress" style="background-size:75% 100%">
  75%
</div>

Вы можете добавить больше окраски, чтобы приблизиться к желаемому изображению:

.progress {
  width:200px;
  line-height:50px;
  margin:5px;
  text-align:center;
  font-size:30px;
  background:
    /*light overlay on the half top*/
    linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)) top/100% 50%,
    /*the two bars*/
    linear-gradient(#539041,#539041) left/5px 100%,
    linear-gradient(#539041,#539041) var(--p,100%) 0/5px 100%,
    /*the progress*/
    linear-gradient(#53e15a,#53e15a) left/var(--p,100%) 100%,
    /*the outer coloration*/
    #bbbbbb;
  background-repeat:no-repeat;
}

<div class="progress">
  100%
</div>

<div class="progress" style="--p:50%">
  50%
</div>

<div class="progress" style="--p:75%">
  75%
</div>

Answer 3

Не уверен, правильно ли я понял ... Это то, чего вы хотите достичь?

HTML

<section class="parent">
  <article class="child">
  </article>
  <article class="child">
  </article>
</section>

CSS

.parent {
  display: flex;
  width: 100vw;
  justify-content: space-around;
}

.child {
  width: 50%;
  height: 60px;
}

Ссылка на codePen