Основы›Слои

Слои

Стекло может лежать на стекле. Здесь объясняется, кто кого видит.

Правило

Каждый элемент стекла это слой. Слой видит всё, что под ним, включая другое стекло, и не видит ничего выше. Поэтому маленькая кнопка на стеклянной карточке изгибает карточку, а карточка о кнопке не знает.

Кто сверху

По умолчанию выше тот элемент, что позже в документе. Чтобы задать порядок самому, используйте layer. Большее число лежит выше, это работает как z-index.

<edinstvo-glass layer="1" class="card"></edinstvo-glass>
<edinstvo-glass layer="2" class="button"></edinstvo-glass>

Как это устроено

Перед отрисовкой слой берёт свой фон и накладывает на него готовое стекло, лежащее ниже. Затем изгибает эту картинку. Когда нижний слой меняется, верхние тоже перерисовываются.

Группы

Стекло в группе со слиянием это одна поверхность, а значит, один слой. Дочерний элемент без слияния остаётся отдельной поверхностью и может иметь свой layer.

На что смотреть

layer сравнивает числа по всей странице и не учитывает вложенные контексты наложения CSS. Если элемент выглядит верхним, а изгибает как нижний, задайте layer обоим.