css 伪元素和绝对位置

Question

我添加了一个 img 作为伪元素，以便能够在不影响 parent 容器不透明度的情况下更改其不透明度
伪元素位置设置为绝对和相对于 parent 以将其放置在 parent div section-1 内
为什么 section-1 中的所有 children 都需要将位置设置为 relative 可见 ?

.section-1 {
  position: relative;
  height: 100vh;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* background-color: rgb(228, 223, 176); */
}

.section-1::before {
  content: "";
  background-image: url("https://i.stack.imgur.com/XPTjz.jpg");
  background-size: cover;
  position: absolute;
  background-position: bottom;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  /* Add change */
  opacity: 0.75;
}

[![测试][1]][1]

[1]:

body {
  margin: 0;

  font-family: Calibri, sans-serif;
}

.section-1 {
  position: relative;
  height: 100vh;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* background-color: rgb(228, 223, 176); */
}

.section-1::before {
  content: "";
  background-image: url("https://i.stack.imgur.com/XPTjz.jpg");
  background-size: cover;
  position: absolute;
  background-position: bottom;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  /* Add change */
  opacity: 0.75;
}

.navigation-bar {
  width: 100%;
  position: relative;
  display: flex;

  justify-content: space-between;
}

.header-content {
  /* Add margin specific */
  position: relative;
}

.section-2 {
  position: relative;
  height: 100vh;
  width: 100%;
}

/* https://i.stack.imgur.com/XPTjz.jpg */

  <body>
    <div class="section-1">
      <div class="navigation-bar">
     

        <nav class="header-nav">
          <a href="#">1</a>
          <a href="#">2</a>
          <a href="#">2</a>
        </nav>
      </div>

      <div class="header-content">
        <h1>header</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque,
          animi? Expedita, id et. Distinctio libero vitae itaque, sit quaerat,
          cupiditate tempora repudiandae minus quam provident ea, cumque
          perferendis saepe laborum.
        </p>
        <a href="#">44</a>
      </div>

      <div class="curios">
        <p>wewewewewew</p>
      </div>
    </div>

   
  </body>

Answer 1

使用z-index

body {
  margin: 0;
  font-family: Calibri, sans-serif;
}

.section-1 {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* background-color: rgb(228, 223, 176); */
  z-index:0;
}

.section-1::before {
  content: "";
  background-image: url("https://i.stack.imgur.com/XPTjz.jpg");
  background-size: cover;
  position: absolute;
  background-position: bottom;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  /* Add change */
  opacity: 0.75;
  z-index:-1;
}

.navigation-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.header-content {
  /* Add margin specific */
}

.section-2 {
  height: 100vh;
  width: 100%;
}

/* https://i.stack.imgur.com/XPTjz.jpg */

<body>
    <div class="section-1">
      <div class="navigation-bar">
     

        <nav class="header-nav">
          <a href="#">1</a>
          <a href="#">2</a>
          <a href="#">2</a>
        </nav>
      </div>

      <div class="header-content">
        <h1>header</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque,
          animi? Expedita, id et. Distinctio libero vitae itaque, sit quaerat,
          cupiditate tempora repudiandae minus quam provident ea, cumque
          perferendis saepe laborum.
        </p>
        <a href="#">44</a>
      </div>

      <div class="curios">
        <p>wewewewewew</p>
      </div>
    </div>

   
  </body>

Answer 2

见Stacking without the z-index property

当没有在任何元素上指定z-index 属性时，元素按以下顺序堆叠（从下到上）：

根元素的背景和边框
后代非定位块，按照在 HTML
后代定位元素，按照在 HTML

在您的示例中，.section-1 相对定位，因此创建了一个新的 stacking context。 .section-1::before 是绝对定位的，因此在相同的堆叠上下文中将比任何非定位元素堆叠得更高。

一旦.navigation-bar和.header-content相对定位，它们将堆叠得比.section-1::before高（因为它们在HTML中出现在.section-1::before之后).

css 伪元素和绝对位置

css pseudo elements and position absolute

html

css

css-position

pseudo-element