Как задать ширину в % от родителя, если элемент фиксированный?

Question

[aquapendente]

Всем привет. Есть вот такой код:

<div class="block1">
  <span class="block2"></span
</div>

И вот такие вот стили:

.block1{
  width: 50vw;
}
.block2{
  position: fixed;
  max-width: 78vw;
  width: 50%;
}

Но при таком раскладе 50% задается от всей страницы, а не от .block1, как это исправить? Единицы измерения менять нельзя.

Comments

[Ankhena]

Потому что fixed считает от вьюпорта.
Если нужно считать от ближайшего не static, то нужно изменить на absolute. И задать тому от кого позиционировать, например, relative или любой другой подходящий не static.

[aquapendente]

Ankhena, Если я вас правильно понял, то

.block1{
  position: absolute;
  width: 50vw;
}
.block2{
  position: fixed;
  max-width: 78vw;
  width: 50%;
}

Но это по прежнему не работает

[aquapendente]

Это не работает для меня. Посмотрите мою проблему на mrsakura52.ru block1 из примера - это .scrollpos-bar-wrapper, а .block2 - .scrollpos-bar Все находятся в .header

[Ankhena]

aquapendente, прочитайте, пожалуйста, внимательно, что я написала выше.

Еще раз: fixed нужно заменить на absolute.
И задать position отличный от static тому родителю, относительно которого позиционировать и считать.

[aquapendente]

Ankhena, Вот теперь все работает, спасибо!

Answer 1

[iBird Rose]

добавь для .block1:

.block1 {
   transform: scale(1);
}

Comments

[aquapendente]

Это не работает для меня. Посмотрите мою проблему на mrsakura52.ru block1 из примера - это .scrollpos-bar-wrapper, а .block2 - .scrollpos-bar Все находятся в .header

[iBird Rose]

aquapendente, а зачем ты фиксируешь .scrollpos-bar ? если можно фиксировать .scrollpos-bar-wrapper и не будет этой проблемы.