Is it possible to give an element a higher z-index than its parent?

Question

I am having a problem with stacking context. There are four lines for decoration. These four lines should be under the navbar logo and page content.

This is my code snippet:

body {
  padding: 0;
  margin: 0;
  background: #333;
}
.navbar{
  padding: 1rem;
  color: white;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}
.navbar.bg-dark {
  background-color: #333;
}

.navbar-logo {
  font-style: italic;
  font-weight: bold;
  font-size: 24px;
  letter-spacing: 10px;
}

.content {
  padding: 100px 20px;
  height: 600px;
  color: white;
  font-weight: bold;
}

.page-container {
  max-width: 1024px;
  margin: 0 auto;
}

/* Line */
.line {
  width: 100vw;
  left: 100px;
  height: 3px;
  background-color: #5c5c5c;
  position: fixed;
  transform-origin: left;  
  top: -1px;
  z-index: 1;
}
.line.line-1 {
  transform: rotate(27.45deg);
}
.line.line-2 {
  transform: rotate(47deg);
}
.line.line-3 {
  transform: rotate(70deg);
}
.line.line-4 {
  transform: rotate(105deg);
}

<div class="navbar bg-dark">
  <div class="navbar-logo">
    Navbar Logo
  </div>
</div>

<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
<div class="line line-4"></div>

<div class="page-container">
  <div class="content">
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
</div>

As you can see in the demo, Navbar Logo is being blocked by decorative lines. I am trying to give a higher z-index to Navbar Logo but it is not working because of its parent. For this kind of problem, what is the most proper way? Giving four lines to the body as a background image? Or should I go with another method?

It is a screenshot of what I want to see in the final:

Geshode · Accepted Answer · 2023-01-25T06:19:08.983

Remove the z-index from the line class and add z-index: 1; and position: relative; to the page-container class.

This way the logo and the text will be above the lines.

body {
  padding: 0;
  margin: 0;
  background: #333;
}
.navbar{
  padding: 1rem;
  color: white;
  position: fixed;
  top: 0;
  height: 30px;
  width: 100%;
  z-index: 2;
  overflow: hidden;
}
.navbar.bg-dark {
  background-color: #333;
}

.navbar-logo {
  position:relative;
  font-style: italic;
  font-weight: bold;
  font-size: 24px;
  letter-spacing: 10px;
  z-index: 3;
}

.content {
  padding: 100px 20px;
  height: 600px;
  color: white;
  font-weight: bold;
}

.page-container {
  position: relative;
  max-width: 1024px;
  margin: 0 auto;
  z-index: 1;
}

/* Line */
.line {
  width: 100vw;
  left: 100px;
  height: 3px;
  background-color: #5c5c5c;
  position: absolute;
  transform-origin: left;  
  top: -1px;
}
.line.line-1 {
  transform: rotate(27.45deg);
}
.line.line-2 {
  transform: rotate(47deg);
}
.line.line-3 {
  transform: rotate(70deg);
}
.line.line-4 {
  transform: rotate(105deg);
}
.background {
  position: fixed;
}

<div class="navbar bg-dark">
  <div class="navbar-logo">
    Navbar Logo
  </div>
  <div class="line line-1"></div>
  <div class="line line-2"></div>
  <div class="line line-3"></div>
  <div class="line line-4"></div>
</div>

<div class="background line line-1"></div>
<div class="background line line-2"></div>
<div class="background line line-3"></div>
<div class="background line line-4"></div>

<div class="page-container">
  <div class="content">
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
</div>

EDIT: Changed the answer to look like the screenshot, and to have the scrolling work correctly.

Thank you for your answer. But another problem is, the nav class should have a higher z-index than page-container class. Because it is a fixed nav and it should not be transparent when it is scrolling. — Ramazan Erikli, Jan 25 '23 at 05:44
@RamazanErikli I updated the answer to what you want, I think. — Geshode, Jan 25 '23 at 06:19

Is it possible to give an element a higher z-index than its parent?

1 Answers1