Z-index Problem With Multi-layer Background

I'm trying to implement a specific design but have stumbled upon quite a lot of complexities by now. The main problem remains the background of linear gradient - it shall be stretc

Solution 1:

A solution is to remove z-index from #about_center to avoid stacking context issue then you will able to place #about_background and #intro_text like you want as they will be in the same stacking context of the gradient background. You can then place one below and the other above.

So you remove this:

#about_center {
  position: relative;
  display: flex;
  /*z-index: -1; */overflow-y: scroll;
  flex-grow: 1;
}

And add this:

#intro_text {
   ....
   z-index:3;
}

Full code:

https://jsfiddle.net/tfx9pLrq/3/

#index_header {
  display: block;
  position: relative;
}

#index_navigation {
  position: relative;
  top: 0px;
  padding-top: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 850px;
  width: 80%;
  margin: 0 auto;
}

#index_logo {
  display: block;
  width: 150px;
  height: 52px;
  background-image: url("images/index/logo.png");
  background-size: contain;
  background-repeat: no-repeat;
}

#index_navigation_left {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#index_navigation_center {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-preferred-size: 80%;
  flex-basis: 80%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#index_navigation_right {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#index_navigation_core {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  list-style-type: none;
  text-align: center;
  min-width: 420px;
  padding: 0;
  width: 60%;
}

#index_navigation_coreli {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

#index_navigation_corelia {
  color: white;
  font-size: 1.250em;
  text-decoration: none;
  cursor: pointer;
}

#navigator_authentication {
  display: block;
  background-color: white;
  text-decoration: none;
  color: #860001;
  cursor: pointer;
  font-size: 1.125em;
  padding: 10px30px10px30px;
  border-radius: 20px;
}

#index_footer {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 850px;
  width: 80%;
  margin: 0 auto;
}

#index_footer_left {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#index_footer_right {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#index_footer_leftp {
  font-size: 0.938em;
  font-family: 'bpg_arialregular';
  color: white;
}

#social_media_btns {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0;
  list-style-type: none;
}

#social_media_btnsli {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

#social_media_btnslia {
  display: block;
  width: 30px;
  height: 30px;
}

#social_media_facebook {
  background-size: cover;
  background-image: url("images/social_media_icons/universal/facebook.png");
}

#social_media_youtube {
  background-size: cover;
  background-image: url("images/social_media_icons/universal/youtube.png");
}

#social_media_twitter {
  background-size: cover;
  background-image: url("images/social_media_icons/universal/twitter.png");
}

.present {
  border-bottom: solid white 3px;
}

.nav_button {
  -webkit-transition: border 0.35s ease;
  -o-transition: border 0.35s ease;
  transition: border 0.35s ease;
}

.nav_button:hover {
  border-bottom: solid white 3px;
}

#mobile_menu {
  display: none;
  width: 80px;
  height: 80px;
  cursor: pointer;
  background-image: url("images/icons/menu.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

@mediaonly screen and (max-width: 880px) {
  #index_navigation {
    min-width: 300px;
  }
  #index_navigation_center {
    display: none;
  }
  #mobile_menu {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  #index_footer {
    min-width: 300px;
  }
}

@mediaonly screen and (max-width: 500px) {
  #navigator_authentication {
    font-size: 0.9em;
    padding: 5px10px5px10px;
  }
  #mobile_menu {
    width: 60px;
    height: 60px;
  }
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background-color: #F5F5F5;
}

#index_overlay {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#index_header {
  z-index: 3;
}

#about_pattern {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url("https://i.imgur.com/F8SFW2p.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

#about_pattern_2 {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(100, 0, 1, 0.75) 0%, rgba(189, 0, 1, 0.75) 24.86%, rgba(210, 0, 1, 0.75) 82.87%, rgba(100, 0, 1, 0.75) 100%);
  border: 1px solid #000000;
  box-sizing: border-box;
}

#index_navigation {
  padding-bottom: 25px;
}

#nav_background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#about_center {
  position: relative;
  display: flex;
  overflow-y: scroll;
  flex-grow: 1;
}

#about_background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #F5F5F5;
  z-index: -1;
}

#foot_background {
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
}

#intro_text {
  position: relative;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 60px;
  padding-bottom: 60px;
  font-size: 1.125em;
  text-decoration: none;
  line-height: normal;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  overflow-y: auto;
  text-align: left;
  color: #4F4F4F;
  z-index: 3;
}

footer {
  position: relative;
  padding-top: 25px;
  padding-bottom: 25px;
  flex-shrink: 0;
  z-index: 3;
}

<divid="index_overlay"><divid="about_pattern"></div><divid="about_pattern_2"></div><headerid="index_header"><divid="nav_background"></div><divid="index_navigation"><divid="index_navigation_left"><aid="index_logo"href="/"></a></div><divid="index_navigation_center"><ulid="index_navigation_core"><li><ahref="/"class="nav_button present">btn1</a></li><li><ahref="/navigator"class="nav_button">btn2</a></li><li><ahref="/about_us"class="nav_button">btn3</a></li></ul></div><divid="mobile_menu"></div><divid="index_navigation_right"><ahref="/authentication"id="navigator_authentication">btn4</a></div></div></header><divid="about_center"><divid="about_background"></div><divid="intro_text"><divstyle="text-align: center;">text here</div><br><br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
      book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
      with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div></div><footer><divid="foot_background"></div><divid="index_footer"><divid="index_footer_left"><p>&copy 2018 mysite</p></div><divid="index_footer_right"><ulid="social_media_btns"><li><atarget="_blank"id="social_media_facebook"></a></li><li><atarget="_blank"id="social_media_youtube"></a></li><li><aid="social_media_twitter"></a></li></ul></div></div></footer></div>

---

For a more accurate explanation we can refer to the specification:

For those with 'z-index: auto', treat the element as if it created a new stacking context, but any positioned descendants and descendants which actually create a new stacking context should be considered partof the parent stacking context, not this new one.

So by removing z-index it will fall back to auto and we removed the restriction of making our elements in the stacking context of their parent and controled by the z-index of their parent. They now belong to the upper stacking context which is the same as the gradient.

In other words, adding z-index to the parent element will make z-index of child elements to only be consider inside their parent after that everything will be placed considering the z-index of the parent. Either everything will be above the gradient or everything below it.