Таинственное поведение с использованием CSS-сетки, псевдоэлементов и фиксированного позиционирования - PullRequest
Новая
       58

Таинственное поведение с использованием CSS-сетки, псевдоэлементов и фиксированного позиционирования

0 голосов
/ 09 февраля 2019

Я пытаюсь поместить текст в правую часть сетки, но я понятия не имею, почему он отталкивает фон.

Возможно, это проблема с ::after.

Я не возражаю против каких-либо предложений изменить это, если фон разделен на 50% 50%.

Я очень ценю вашу помощь!

:root {
  --backColor: #F2F2EF;
  --mainColor: #37384E;
  --textColor: #9BBEC7;
}

.grid-container {
  display: grid;
  grid-template-areas: 'left right';
  grid-template-columns: 50% 50%;
  grid-template-rows: 100%;
}

body {
  background: var(--backColor);
  margin: 0%;
}

body:after {
  content: '';
  position: fixed;
  height: 100%;
  width: 50%;
  right: 50%;
  background: var(--mainColor);
}

.logo {
  margin: 0%;
  font-size: 60px;
  grid-area: right;
}
<div class="grid-container">
  <p class="logo">jZ</p>
</div>

Ответы [ 2 ]

0 голосов
/ 10 февраля 2019

Проблема

Основная проблема - ваш порядок рендеринга.

Браузер размещает ваши элементы в следующем порядке:

  1. Элемент body.

  2. .grid-containerelement.

  3. Псевдоэлемент body::after.

Первое, что следует отметить, это то, что ваш псевдоэлемент отображается последним.Зачем?Поскольку он приходит ::after элемент body.

К этому времени элемент .grid-container уже занял свое место, поэтому псевдоэлемент должен появиться на следующемline.

Быстрое и простое решение этой проблемы - переключиться с ::after на ::before, чтобы псевдоэлемент переместился на первое место в порядке рендеринга.Готово!

::after (оригинальный код) 

.grid-container {
  display: grid;
  grid-template-areas: 'left right';
  grid-template-columns: 50% 50%;
}

body {
  background: var(--backColor);
  margin: 0;
}

body::after {
  content: '';
  position: fixed;
  height: 100vh;
  width: 50%;
  right: 50%;
  background: var(--mainColor);
}

.logo {
  margin: 0;
  font-size: 60px;
  grid-area: right;
}

:root {
  --backColor: #F2F2EF;
  --mainColor: #37384E;
  --textColor: #9BBEC7;
}
<div class="grid-container">
  <p class="logo">jZ</p>
</div>

::before (решение № 1) 

.grid-container {
  display: grid;
  grid-template-areas: 'left right';
  grid-template-columns: 50% 50%;
}

body {
  background: var(--backColor);
  margin: 0;
}

body::before {  /* adjustment */
  content: '';
  position: fixed;
  height: 100vh;
  width: 50%;
  right: 50%;
  background: var(--mainColor);
}

.logo {
  margin: 0;
  font-size: 60px;
  grid-area: right;
}

 :root {
  --backColor: #F2F2EF;
  --mainColor: #37384E;
  --textColor: #9BBEC7;
}
<div class="grid-container">
  <p class="logo">jZ</p>
</div>

Но псевдоэлемент имеет фиксированное положение.Почему он распознает пространство .grid-container?

  • При position: fixed элемент удаляется из потока документов.Его содержащий блок является начальным содержащим блоком, который для всех намерений и целей эквивалентен окну просмотра.

  • Свойства смещения CSS (top, bottom, left и right), которые контролируют размещение абсолютно позиционированных элементов (включая фиксированное позиционирование), имеют начальное значение , равное auto. Это означает, что элемент остается в том же месте, где он был бы обычно, если бы он был в потоке документов.

  • Сказано иначе, когда вы устанавливаете элементposition: absolute или position: fixed, вы указываете желаемый тип позиционирования ... , но нигде не позиционируете его.

  • Этопока вы не определите смещения, которые элемент фактически позиционирует.

  • В этом случае это означает, что элемент ::after, появляющийся ниже .grid-container по причинам, описанным выше,можно сдвинуть на место с помощью top: 0.

::after с помощью top: 0 (решение № 2) 

.grid-container {
  display: grid;
  grid-template-areas: 'left right';
  grid-template-columns: 50% 50%;
}

body {
  background: var(--backColor);
  margin: 0;
}

body::after {
  content: '';
  position: fixed;
  height: 100vh;
  width: 50%;
  right: 50%;
  background: var(--mainColor);
  top: 0; /* new */
}

.logo {
  margin: 0;
  font-size: 60px;
  grid-area: right;
}

:root {
  --backColor: #F2F2EF;
  --mainColor: #37384E;
  --textColor: #9BBEC7;
}
<div class="grid-container">
  <p class="logo">jZ</p>
</div>

.grid-container::after (решение № 3)

Еще одно решение заключается в применении псевдоэлемента к .grid-container вместо body,Теперь элемент с фиксированной позицией отображается как дочерний элемент контейнера сетки до того, как элемент body закрывается.И ::after, и ::before решают проблему. 

.grid-container {
  display: grid;
  grid-template-areas: 'left right';
  grid-template-columns: 50% 50%;
}

body {
  background: var(--backColor);
  margin: 0;
}

.grid-container::after {
  content: '';
  position: fixed;
  height: 100vh;
  width: 50%;
  right: 50%;
  background: var(--mainColor);
}

.logo {
  margin: 0;
  font-size: 60px;
  grid-area: right;
}

:root {
  --backColor: #F2F2EF;
  --mainColor: #37384E;
  --textColor: #9BBEC7;
}
<div class="grid-container">
  <p class="logo">jZ</p>
</div>
0 голосов
/ 10 февраля 2019

Поскольку ваш псевдоэлемент (: after) имеет фиксированную позицию, вам понадобится что-то для работы в качестве ссылки, откуда он должен быть расположен.Добавьте к нему «top: 0», и оно должно работать.

...