使用CSS网格，伪元素和固定位置的神秘行为

Question

我试图在网格的右侧放置一些文本，但是我不知道为什么它压低了背景。

也许是::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>

Answer 1

问题

基本问题是您的渲染顺序。

浏览器按以下顺序布置元素：

1. body元素。

2. .grid-container元素。

3. body::after伪元素。

首先要注意的是，伪元素最后呈现。为什么？因为它来自 ::after body元素。

这一次.grid-container元素已经占据了空间，因此伪元素必须出现在下一行。

此问题的快速简单的解决方案是从::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从文档流中删除一个元素。其containing block是初始包含块，就所有意图和目的而言，它都等同于视口。

• CSS offset properties（top，bottom，left和right），用于控制绝对放置的元素的位置（包括固定位置），其initial value为auto。 这意味着该元素将保留在文档流中通常所在的位置。

• 以另一种方式表示，当您将元素设置为position: absolute或position: fixed时，您正在指定所需的定位类型... 但您没有定位它在任何地方。

• 直到定义元素实际定位的偏移量为止。

• 在这种情况下，这意味着出于上述原因而出现在::after下方的.grid-container元素可以用top: 0移到适当的位置。

  < / li>

::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>

Answer 2

由于您的伪元素（：after）具有固定位置，因此您需要一些东西来作为应从其放置位置的参考。向其添加“ top：0”，它应该可以工作。