Я пытался в течение последних нескольких часов выяснить, почему дочерний элемент позиционировался против своего родителя, а не экрана, хотя он позиционируется как "фиксированный". Очень к счастью, я наткнулся на упоминание о том, что -webkit-transform: translate3d(0, 0, 0) на родителя может заставить вещи пойти наперекосяк. Я использую структуру bootstrap, и поэтому они действительно помещают это свойство в класс .navbar-fixed-top, который имеет один из родительских элементов. Как только я удалил его, ребенок начал позиционировать снова окно просмотра. Поэтому у меня есть два вопроса:
-webkit-transform: translate3d(0, 0, 0) делают эти неприятные вещи?.navbar-fixed-top? UPDATE
Кажется, я нашел ответ на второй вопрос. Вот сообщение фиксации:
Прикладной translate3d для модального, установленного на navbar и прикрепленного к браузеру перекрашивать
Вот ответ на второй вопрос:
Любое вычисленное значение, отличное от none для преобразования, приводит к создание как стекирующего контекста, так и содержащего блока. Объект действует как содержащий блок для фиксированных помещенных потомков.
Относительно вашего первого вопроса:
Вы используете преобразования. Что вызывает проблему.
Взгляните на спецификацию: Модель рендеринга трансформирования
Указание значения, отличного от 'none для свойства' transform устанавливает новую локальную систему координат в элементе, который применяется к.
Таким образом, элемент с фиксированным позиционированием будет относиться к элементу с преобразованием, а не к окну просмотра
Я использовал этот "хакерский" (- webkit-transform: translate3d (0, 0, 0)), чтобы исправить глюки из масштаба преобразования (некоторые элементы, которые перемещались, когда я взаимодействовал со страницей), но у меня была проблема с позицией исправлено на webkit (я не мог сосредоточиться на фиксированных позиционированных текстовых вводах), и когда я удалил его, он был исправлен. Поскольку я использовал масштаб преобразования только в firefox, у меня не было проблем с его удалением (на webkit я закончил использование zoom, который действует намного лучше, чем transform: scale (но -webkit-transform: translate3d (0, 0, 0) остался там из унаследованного css), и я надеюсь, что поддерживаемый firefox также будет масштабироваться)