Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
5 replies
vince

Stacking Context behavior

I have the following Sass code:

  .image-container#water {
    position: relative;
    z-index: 1;
    background: center / 70% no-repeat url("/water-1.svg") t.$clr-brand-dark;

    .drip-drop {
      position: absolute;
      display: block;
      content: "";
      top: 1rem;
      left: 2rem;
      width: 5rem;
      height: 5rem;
      border-radius: 100%;
      background: center / 50% no-repeat url("/drip-drop.svg")
        t.$clr-brand-dark;

      &::after {
        position: absolute;
        display: block;
        content: "";
        bottom: -3px;
        right: -3px;
        z-index: -1;
        width: 100%;
        height: 100%;
        background-color: t.$clr-brand-muted;
        border-radius: 100%;
      }
    }
  }


It produces the first picture.

However, what I'm really confused about is when I add z-index: 3 (or some other z-index) to .drip-drop, it produces the second picture, where the ::after psuedo element is above the parent .drip-drop. I don't really know why this behavior exists this way. I have a suspicion it has something to do with stacking context, but I have no idea what stacking context really is and I'm unsure if that's really the issue. Would someone be able confirm if that is the case please?
image.png
image.png
Was this page helpful?