1. Введение
До написания этой статьи мое понимание фиксированного элемента было таким :(Основы макета CSS)
固定定位与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
Но пока я не увидел эту статьюПочему CSS так сложно выучить?, Автор упомянул в статье «черную магию», как заставить фиксированный элемент больше не использовать область просмотра в качестве объекта ссылки позиционирования, а родительский контейнер в качестве объекта ссылки. На этот раз я получил навык. Единственное, в чем я не согласен с автором, так это в том, что CSS, который он упомянул, "неортогонален" и сложен в изучении.На самом деле, я думаю, что фундаментальная причина в том, что база знаний недостаточно прочна. У всего есть принцип, и невозможно, чтобы объект, который не может быть объяснен наукой, возник без причины.
Итак, здесь мы намерены использовать эту точку знаний в качестве основы для изучения того, почему это происходит, а затем написать сравнительный пример, который можно больше использовать на мобильном терминале.
2. Почему родительский элемент фиксированного элемента принимает родительский элемент в качестве объекта ссылки при добавлении преобразования?
Подробная демонстрация выглядит следующим образом:
Глядя на эту демонстрацию, мы обнаружили, что устанавливаем родительский элементtransform: scale(1);этот атрибут, затем его дочерние элементыfixed-to-containerРодительский элемент используется как эталонный объект, и он больше не фиксируется на одном месте, а будет течь по течению документооборота.
Почему это?
Ответ установленtransformатрибут элемента в документе W3cсвойство преобразования, определение документа переводится следующим образом:
对于布局受CSS盒子模型控制的元素，transform属性不会影响transformed元素周围的内容流。但是，溢出区域的范围将会考虑上transform元素。这种行为类似于元素通过相对定位发生偏移时的情况。因此，如果overflow属性的值是`scroll`或`auto`的，滚动条将显示为需要看到在可见区域外转换的内容。
对于布局受CSS盒子模型控制的元素，除了配置为`none`之外，其他的`transform`属性值都会创建堆栈上下文。绘制的实现必须在其父栈上下文中它所创建的层中，如果它是带有“z-index: 0”的定位元素，则使用相同的堆叠顺序。如果一个带有`transform`的元素还配置了`position`属性，那么“z-index”属性将按照[CSS2](https://www.w3.org/TR/css-transforms-1/#biblio-css2)描述的被应用，除非“auto”被视为“0”，因为会创建新的堆栈上下文。
对于布局受CSS盒子模型控制的元素，除了配置为`none`之外，其他的`transform`属性值都将导致元素成为一个包含块，而其固定定位的后代元素都是以此object作为他们的包含块。
根元素的[Fixed Backgrounds](https://www.w3.org/TR/css3-background/#fixed0)会受到该元素上配置的transform属性的影响。对于受transform影响的所有其他元素(例如，对它们应用transform属性，或者对它们的任何祖先元素应用transform属性)， `background-attachment`属性值为`fixed`的元素会被当做它好像有配置`scroll`属性一样。其他`background-attachment`的计算值不受影响.
В этом введении мы находимtransformбудуfixedзатрагиваются свойства. Конкретную производительность можно увидеть в демонстрации выше.
Проще говоря:Элемент с примененным атрибутом преобразования заставит элемент сформировать новый содержащий блок, а затем, если его дочерний элемент имеет фиксированный атрибут позиционирования, тогда его элемент будет использовать родительский элемент в качестве содержащего блока, что приведет к явлению, которое мы видели ранее. . . .
В дополнение к вышеперечисленному я обнаружил еще две особенности:
- Фиксированный элемент не фиксируется в определенном положении, теряя уникальные свойства фиксированного элемента
- Фиксированный элемент не вырывается из потока документа, но такие атрибуты, как top, по-прежнему доступны. Вы можете увидеть свойство top в примере и настроить top: 10px, весь поток документа идет вниз на 10px;
3. Истинный фиксированный элемент, но не привязанный к области просмотра
Упомянутый здесь реальный неподвижный элемент действительно может быть зафиксирован в определенном положении, и через него могут проходить другие элементы. В реальных проектах есть очень распространенное требование, например следующее демо:
В демонстрации, когда мы нажимаем кнопку, панель всплывает. В верхней части панели будет фиксированная голова, а другие части панели могут свободно скользить. Я думаю, что в этом будет использоваться много детской обуви. кейс.
Согласно тому, что мы сказали ранее, такое решение формируется.
Но не ясно, является ли этот подход лучшим? Есть ли лучшая практика для детской обуви, ориентированной на CSS? Не стесняйтесь просветить меня.