Абсолютное позиционирование элементов

Дочерние блоки можно позиционировать относительно родителя 1/2/3 уровня и тд. То того родителя которому присвоено свойство

position: relative;

То есть в данный момент позиционирую на 2 родителя выше. Но если присвоить 1 родителю свойство

container-type: size;

Дочерние элементы будут позиционироваться относительно 1 родителя, вместо второго...

Вопрос в том, как сделать чтобы и текст масштабировался на дочерних блоках относительно первого родителя. И дочерние блоки позиционировать относительно 2 родителя...

Не внося поправки в html документ, только за счет css..?

Не понимаю, почему не работает если делать так

height: 200px;
container-type: size;
font-size: 2cqb;

Размер шрифта будет статичным, работает если родителю присвоить

container-type: size;

.ps {
   height: 200px;
   width: 200px;
   background: red;
   position: relative;
   display: flex;
   flex-direction: column;
}

.p {
  display:flex;
  height: 30%;
  width: 100%;
  background: green;
  margin-top:auto;
  container-type: size;
  
}
.p .text {font-size: 32cqb}

.pos {
    position: absolute;
    top: 0;
    right: 0;
    height: 50px;
    aspect-ratio: 1 / 1;
    background: blue;
}

<div class='ps'>

  <div class='p'>
    <div class='pos'></div>
    <div class='text'>asdsd</div>
  </div>
</div>

Как не внося изменения в html, заставить позиционировать синий квадрат, относительно красного??