使用 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

由于你的伪元素 (:after) 有一个固定的位置，你需要一些东西作为它应该放置的位置的参考。将 "top: 0" 添加到它，它应该可以工作。

Answer 2

问题

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

浏览器按以下顺序排列您的元素：

1. body元素。

2. .grid-container元素。

3. body::after伪元素。

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

此时.grid-container元素已经占据了它的space，所以伪元素必须出现在下一行

解决这个问题的快速简单的方法是从 ::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的space？

• 使用 position: fixed 从文档流中删除一个元素。它的 containing block 是初始包含块，就所有意图和目的而言，它等同于视口。

• autoCSSoffset properties (top, bottom, left and right), which control the placement of elements that are absolutely-positioned (including fixed positioning), have an initial value。 这意味着该元素保留在它在文档流中通常所在的相同位置。

• 换句话说，当您将元素设置为 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>