使用 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）控制绝对定位（包括固定定位）元素的放置，有一个 @987654323 @auto。 这意味着元素保留在文档流中的正常位置。

1234563 /em>

• 直到您定义了元素实际定位的偏移量。

• 在这种情况下，这意味着 ::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

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