使用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到位。

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

当你的伪元素（：以后）有一个固定的位置，你需要的东西从它应该定位的参考工作。添加“顶部：0”给它，它应该工作。