Justify-self не работает с абсолютно позиционированными элементами в Chrome - PullRequest
Новая
       15

Justify-self не работает с абсолютно позиционированными элементами в Chrome

2 голосов
/ 06 июля 2019

justify-self не оказывает никакого влияния на элементы с position: absolute или position: fixed, установленными в Chrome.

MDN говорит

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

, поэтому я ожидал, что Chromeследуйте EdgeHTML на основе Edge и Firefox при выравнивании элементов, но, похоже, это не имеет никакого эффекта.У меня нет компьютера Apple для тестирования, поэтому я не уверен, как Safari будет отображать страницу.

Настройка right: 0 правильно перемещает элемент к правому краю страницы, но этот обходной путь нене работает, если ваша страница опирается на выравнивание элементов по оси сетки.

То же самое происходит и с align-self, опять же противореча тому, что MDN говорит:

Его поведение зависит от модели макета, как описано для justify-self. 

body {
  display: grid;
  width: 100vw;
  height: 100vh;
  margin: 0;
}

#absolute {
  position: absolute;
  align-self: end;
  justify-self: end;
}
<div id="absolute">
  <p>This element is absolutely positioned at the container's end.</p>
</div>

Ответы [ 2 ]

1 голос
/ 06 июля 2019

Просто добавьте position: relative в контейнер сетки. 

body {
  display: grid;
  height: 100vh;
  margin: 0;
  position: relative; /* new */
}

#absolute {
  position: absolute;
  align-self: end;
  justify-self: end;
}
<div id="absolute">
  <p>This element is absolutely positioned at the container's end.</p>
</div>

В рамках работы, проделанной Igalia в реализации CSS Grid Layout для Chromium / Blink и Safari / WebKit, мы внедрилиподдержка позиционируемых предметов.Да, абсолютное позиционирование внутри сетки.

На самом деле нет такой большой разницы по сравнению с обычными элементами сетки.Когда контейнер сетки является содержащим блоком позиционируемых элементов (например, с использованием position: relative на контейнере сетки), они размещаются почти так же, как обычные элементы сетки.

https://blogs.igalia.com/mrego/2016/05/27/css-grid-layout-and-positioned-items/

1 голос
/ 06 июля 2019

Вам следует обратить внимание, потому что вы рассматриваете свойство, определенное в черновой спецификации: https://drafts.csswg.org/css-align-3/#propdef-justify-self

Эта спецификация еще не поддерживается, поэтому justify-self не окажет влияния на элемент, который неэлементы сетки, как в данном случае, так как вы создали элемент position:absolute, который теперь будет иметь видовой экран как содержащий блок и больше не будет контейнером сетки.Та же логика для position: fixed

justify-self на самом деле работает только для сетки CSS, как определено в спецификации:

https://www.w3.org/TR/css-grid-1/

Также обратите вниманието, что MDN предоставляет поддержку браузера для Flexbox на этом конце, что является ошибочным, поскольку в Flexbox нет justify-self, как описано в спецификации:

Это свойство не применяется к элементам flex, потому чтона главной оси находится более одного элемента.См. Flex для растяжения и justify-content для выравнивания по главной оси.[CSS-FLEXBOX-1] ref

И в MDN вы также можете прочитать:

В макетах flexboxэто свойство игнорируется (подробнее о выравнивании во Flexbox)

Из спецификации сетки CSS вы можете прочитать, что:

Абсолютно позиционированный потомокконтейнер сетки находится вне потока и не является элементом сетки , и поэтому не влияет на размещение других элементов или размер сетки.

Статическая позиция [CSS21] изАбсолютно расположенный дочерний элемент контейнера сетки определяется так, как если бы он был единственным элементом сетки в области сетки, края которой совпадают с краями заполнения контейнера сетки.

В вашем случае применяется статическая позиция, поскольку вы не определили верх / лево / право / низ и, как вы можете видеть, это просто поле заполнения контейнера сетки.

Добавьте некоторые отступы, и вы заметите, что элемент будет смещен этим заполнением: 

body {
  display: grid;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 50px;
}

#absolute {
  position: absolute;
  align-self: end;
  justify-self: end;
}
<div id="absolute">
  <p>This element is absolutely positioned at the container's end.</p>
</div>

Однако, если родительский контейнер контейнера сетки также является генератором абсолютно позиционированного элемента, содержащего блок , вместо этого используйте сеткуобласть, определенная в §9.1, с контейнером сетки в качестве содержащего блока.

Если контейнер сетки является содержащим блоком (как в ответе Micheal_B), то положение будет другим.

Смежный вопрос о статическом положении и абсолютных позиционных элементах:

Почему мои абсолютно позиционированные элементы не находятся там, где я ожидаю?

Кросс-браузерные проблемы с фиксированной позицией flexbox и VW

...