css pseudo elements and position absolute

Question

I added a img as a pseudo element to be able to change its opacity without effecting the parent containers opacity
the pseudo element position is set to absolute and relative to parent to place it inside the parent div section-1
why are all children of section-1 required to setting there position to relative to be visible ?

.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;
}

[![test][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>

Why? https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context — ksav, Nov 09 '21 at 08:49
Whether an element is positioned or non-position helps determines stacking context. — ksav, Nov 09 '21 at 09:20

ksav · Accepted Answer · 2021-11-09T09:18:24.547

See Stacking without the z-index property

When the z-index property is not specified on any element, elements are stacked in the following order (from bottom to top):

The background and borders of the root element
Descendant non-positioned blocks, in order of appearance in the HTML
Descendant positioned elements, in order of appearance in the HTML

In your example, .section-1 is relatively positioned so creates a new stacking context. .section-1::before is absolutely positioned, so will stack higher than any non-positioned elements in the same stacking context.

As soon as .navigation-bar and .header-content are relatively positioned, they will stack higher than .section-1::before (because they appear after .section-1::before in the HTML).

score 0 · Answer 2 · answered Nov 09 '21 at 08:43

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

css pseudo elements and position absolute

2 Answers2