Как наложить полосы прогресса на друг друга?

Question

[Danya Wyse]

Не получается сделать так чтобы каждый цвет начинался от начала заполнения прогресса, они встают друг за другом



Надо так

<div class="progress-bar-v">
	<span class="progress-bar-v__item progress-bar-v__item--listening" style="height: 41px;"></span>
	<span class="progress-bar-v__item progress-bar-v__item--vocabulary" style="height: 79px;"></span>
</div>



.progress-bar-v {
	background: $greyColor;
	border-radius: 5px;
	width: 5px;
	height: 196px;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	&__item {
		max-height: 100%;
		width: 100%;
		border-radius: 10px;
		position: relative;
		overflow: hidden;
		&--vocabulary{
			background: $redColor;
			
			}
		&--grammar{
			background: #4D4CAC;
			}
		&--listening{
			background: $blueColor;

			}
		&--writing{
			background: $statsGreyColor;
			}
	}
}

Comments

[drtvader]

position + z-index?

[Владимир Юрченков]

Наложением...но вот третий вариант как (Wed) не получится. В общем одним css тут не обойдешься.

[Ankhena]

они встают друг за другом

Вы же сами задали им flex. Они и выполнили то, что вы попросили.

Замените на гриды и каждому спан укажите занимать одну и ту же клетку.

Владимир Юрченков,

В общем одним css тут не обойдешься.

Это почему это?
JS тут нужен только если данные как-то в динамике меняются.

[Владимир Юрченков]

Ankhena, ну тут же придется еще z-index тогда менять.
На первом столбце к примеру красный над фиолетовым. А на последней, наоборот.
При этом если у красного не поменять индекс, то на последней не будет видно сиреневого вообще.

js может и не нужен, но ряд других сложностей остается

[Ankhena]

Владимир Юрченков,

ну тут же придется еще z-index тогда менять.

Он и без js не плохо меняется.
И без динамики можно элементы поставить в нужном порядке в разметке и z-index не понадобится.

[Danya Wyse]

Ankhena, буду играться с гридами, спасибо за помощь. Как получится, отпишу :)

[Danya Wyse]

Ankhena,
Спасибо за помощь :)

[Ankhena]

Danya Wyse, с виду отлично получилось