In CSS 2.1, If a Parent Establish a Stacking Context, Why Can the Children's Text Go Under the Parent But the Background Color Cannot

  • Home
  • Languages
  • CSS
  • In CSS 2.1, If a Parent Establish a Stacking Context, Why Can the Children's Text Go Under the Parent But the Background Color Cannot

z-index problem with multi-layer background

A solution is to remove z-index from #about_center to avoid stacking context issue1 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_core li {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

#index_navigation_core li a {
  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: 10px 30px 10px 30px;
  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_left p {
  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_btns li {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

#social_media_btns li a {
  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;
}

@media only 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;
  }
}

@media only screen and (max-width: 500px) {
  #navigator_authentication {
    font-size: 0.9em;
    padding: 5px 10px 5px 10px;
  }
  #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;
}
<div id="index_overlay">
  <div id="about_pattern"></div>
  <div id="about_pattern_2"></div>
  <header id="index_header">
    <div id="nav_background"></div>
    <div id="index_navigation">
      <div id="index_navigation_left">
        <a id="index_logo" href="/"></a>
      </div>
      <div id="index_navigation_center">
        <ul id="index_navigation_core">
          <li>
            <a href="/" class="nav_button present">btn1</a>
          </li>
          <li>
            <a href="/navigator" class="nav_button">btn2</a>
          </li>
          <li>
            <a href="/about_us" class="nav_button">btn3</a>
          </li>
        </ul>
      </div>
      <div id="mobile_menu"></div>
      <div id="index_navigation_right">
        <a href="/authentication" id="navigator_authentication">btn4</a>
      </div>
    </div>
  </header>
  <div id="about_center">
    <div id="about_background"></div>
    <div id="intro_text">
      <div style="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>
    <div id="foot_background"></div>
    <div id="index_footer">
      <div id="index_footer_left">
        <p>© 2018 mysite</p>
      </div>
      <div id="index_footer_right">
        <ul id="social_media_btns">
          <li>
            <a target="_blank" id="social_media_facebook"></a>
          </li>
          <li>
            <a target="_blank" id="social_media_youtube"></a>
          </li>
          <li>
            <a id="social_media_twitter"></a>
          </li>
        </ul>
      </div>
    </div>
  </footer>
</div>

Nested z-index not working as expected

The red element is a child of the blue one, so it will always be in front. If you make this slight change your styles will work:

<div class="parent"></div>
<div class="child">child</div>

Now those two div's are "on the same level" and the red one's z-index becomes meaningful, which in your code it wasn't.

Is it possible to set the stacking order of pseudo-elements below their parent element?

Pseudo-elements are treated as descendants of their associated element. To position a pseudo-element below its parent, you have to create a new stacking context to change the default stacking order.

Positioning the pseudo-element (absolute) and assigning a z-index value other than “auto” creates the new stacking context.

#element { 

    position: relative;  /* optional */

    width: 100px;

    height: 100px;

    background-color: blue;

}

#element::after {

    content: "";

    width: 150px;

    height: 150px;

    background-color: red;

    /* create a new stacking context */

    position: absolute;

    z-index: -1;  /* to be below the parent element */

}
<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>Position a pseudo-element below its parent</title>

</head>

<body>

  <div id="element">

  </div>

</body>

</html>

Z-Index issue with child elements

remove .parent's z-index: 1

.parent{
    position: relative; height: 200px; width: 200px; display: inline-block;
}
.parent:hover .child{
    display: block;
}
.child{
    position: absolute; height: 50px; width: 50px; z-index: 2; display: none;
}
 <div class="parent" style="background-color: hotpink;">Parent 1<div class="child" style="background-color: yellow; margin-left: 180px; margin-top: 50px;">Child 1.1</div></div>
 <div class="parent" style="background-color: green;">Parent 2<div class="child" style="background-color: greenyellow; margin-left: -30px;">Child 2.1</div></div>

Why is a textnode rendered below its parents` ::before by default?

::before is painted below text content by default — and the default case is when everything is non-positioned.

But your ::before is absolutely positioned. Positioned boxes are always painted in front of non-positioned boxes. Refer to section 9.9.1 (emphases mine):

Within each stacking context, the following layers are painted in back-to-front order:

  1. the background and borders of the element forming the stacking context.
  2. the child stacking contexts with negative stack levels (most negative first).
  3. the in-flow, non-inline-level, non-positioned descendants.
  4. the non-positioned floats.
  5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
  6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
  7. the child stacking contexts with positive stack levels (least positive first).

Wrapping your text content in a positioned span causes it to be painted in front of the ::before content as expected since then you have two positioned boxes in source order.

Can someone explain stacking contexts?

I found the article you linked by Phillip Walton to be most helpful to me understanding stacking contexts... I went on this study safari in the course of debugging an issue of my own.

Note that the pink square with z-index: 100; appears below the light blue square with z-index: 1; because it's constrained by a stacking context created on .A by the transform.

output of the jsbin code snippet

This jsbin is a bit easier to experiment with than the SO inline code: https://jsbin.com/lataga/2/edit?css,output

div {

  width: 200px;

  height: 200px;

  padding: 1rem;

}

.A {

  position: absolute;

  background-color: red;

  /*

    Adding a transform here creates a

    new stacking context for the children of .A

    */

  transform: translateX(0);

  /*

    several other properties can trigger creation of stacking context,

    including opacity < 1

    */

  /*    opacity: 0.99; */

  /*

    If we raise .A above .B, the children will rise up with it;

    uncomment the following to see:

    */

  /*    z-index: 3; */

}

.a {

  position: relative;

  /*

    even a much higher z-index can't lift .a above .b when

    it is constrained to a lower stacking context

    */

  z-index: 100;

  margin-left: 125px;

  background-color: pink;

}

.B {

  position: absolute;

  margin-top: 75px;

  /*    z-index: 2; */

  background-color: blue;

}

.b {

  margin-left: 50px;

  background-color: lightblue;

  /*

    The following is not necessary: if a z-index is not specified,

    then it is calculated according to the rules of 

    natural stacking order...

    I'm just specifying it explicitly for editorial effect.

    */

  z-index: 1;

}
<div class="A">

  A: 1

  <div class="a">a: 1.100</div>

</div>

<div class="B">

  B: 2

  <div class="b">b: 2.1</div>

</div>

Why doesn't the z-index style apply to the body element?

The issue here is that if the html element doesn't have a background specified, the canvas adopts the background of the body element, and that gets painted first. CSS 2.1 says:

For documents whose root element is an HTML "HTML" element or an XHTML
"html" element that has computed values of 'transparent' for
'background-color' and 'none' for 'background-image', user agents must
instead use the computed value of the background properties from that
element's first HTML "BODY" element or XHTML "body" element child when
painting backgrounds for the canvas, and must not paint a background
for that child element.

See what happens when the html element is given a background:

html { 

  background-color: white;

}

body {

  background: rgba(33, 33, 33, 0.7);

}

#child {

  width: 100px;

  height: 100px;

  background: yellow;

  position: relative;

  z-index: -1;

}
<body>

  <div id="child"></div>

</body>

Related Topics

Css3 Animation and Background-Image in Firefox

Custom Text-Overflow CSS

Content' Attribute to Inherit Node Value

Div Height 100% and Expands to Fit Content

Ff3/Windows CSS Z-Index Problem with Youtube Player

Firefox 1 Pixel Bug with Border-Collapse, Workaround

How to Write CSS Fallbacks for Vh Vw

How to Create Multiple Box-Shadow Values in Less CSS

How to Use the Nth-Child Value as a Parameter in a Property? (And How)

Ampersand (Parent Selector) Inside Nested Selectors

Why Doesn't Height: 0 Hide My Padded <Div>, Even with Box-Sizing: Border-Box

Prevent a Pseudo Element from Triggering Hover

Force Ckeditor to Add a Class to P-Tags

For Div to Extend Full Height

Vertically Center Rotated Text with CSS

Internet Explorer 8 Shows Gradient Instead of Background Image

CSS 62.5% Why Do Developers Use It

Simulating Border-Collapse in Lists (No Tables)


Leave a reply



Submit