# Трансформации, содержащие блоки и позиционирование

Из спецификации нам известна фраза:

> Когда значение свойства `transform` блока равно не `none`, то он становится содержащим блоком для всех своих потомков.

Что это значит?)

Про то, что такое содержащий блок, я подробнее писала [здесь](https://ru.ariarzer.dev/notes/2021/20211102.html). Кратко - это. блок, относительно которого расчитывают относительные размеры и позиция не статически позиционированных потомков.

Например, в этом случае родитель `.b` блока `.a` будет одновременно его содержащим блоком, поэтому его ширина будет `50px`.

<div class="b">
    <div class="a"></div>
</div>
<style>
    .b { width: 100px; }
    .a { width: 50%;}
</style>

В то же время, если абсолютно позиционирвоать блок `.a`, то его содержащим блоком станет *начальный содержащий блок* и ширина станет примерно в половину вьюпорта:

<div class="b">
    <div class="a"></div>
</div>
<style>
    .b { width: 100px; }
    .a { 
        width: 50%;
        position: absolute;
    }
</style>

Также можно добавить блоку `.b` любое не статическое позиционирвоание, чтобы сделать его обратно содержащим блоком для `.a`:

<div class="b">
    <div class="a"></div>
</div>
<style>
    .b { 
        width: 100px; 
        position: relative;
    }
    .a { 
        position: absolute;
        width: 50%;
    }
</style>

Вернемся к `transform` и еще раз посмотрим на абзац и спецификации:

> Когда значение свойства `transform` блока равно не `none`, то он становится содержащим блоком для всех своих потомков.

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

Создадим в примере еще один вложенный блок и посмотрим как это работает:

<div class="c">
    <div class="b">
        <div class="a"></div>
    </div>
</div>
<style>
    .c { 
        width: 500px; 
        position: relative;
    }
    .b {
        transform: rotate(0);
        width: 100px;
    }
    .a { 
        position: absolute;
        width: 50%;
        top: 100px;
    }
</style>

Если бы не трансформаци на блоке `.b`, ширина блока `.a` была бы `250px`, как половина от блока `.c`. Но мы помним, что транформированный блок я вляется содержащим для всех своих потомков, поэтому содержащим для `.a` будет блок `.b`, а не `.c`, и его ширина будет `50px`. Позиционируется `.a` здесь тоже относительно `.b`.

Кроме относительного позиционирвования, также затрагивается и фиксированное. Обычно блок с `position: fixed` позиционируется относительно вьюпорта. То есть сохраняет свою позицию при скролле.
Из этого правила есть много исключений. Одно из них как раз если среди предков фиксированно позиционированного блока есть хотя бы один транформированный.

Вот так блока позицинирован относительно

<div class="c">
    <div class="b">
        <div class="a"></div>
    </div>
</div>
<style>
    .c { 
      width: 100px; 
      position: relative;
    }
    .b {
      width: 30px;
    }
    .a { 
      position: fixed;
      top: 0;
      right: 0;
      width: 50%;
    }
</style>

А теперь один из его предков трансформирован и стал его содержащим блоком, и блок позиционируется и вычисляет размеры отностельно этого предка, а не окна:

<div class="c">
    <div class="b">
        <div class="a"></div>
    </div>
</div>
<style>
    .c { 
      width: 100px; 
      position: relative;
    }
    .b {
      width: 30px;
        transform: rotate(0);
    }
    .a { 
      position: fixed;
      top: 0;
      right: 0;
      width: 50%;
    }
</style>