0

I have an element with two pseudo elements, :before and :after. The parent is positioned relative with z-index: 0, and the two pseudo elements are positioned absolute with z-index: -1.

However, I can't get the parent element to stack on top. How can I fix this?

Here's a codepen illustrating the issue: http://codepen.io/zthall/pen/NNmKgZ

The SCSS code:

.pokeball {
  height: $size / 5;
  width: $size / 5;
  background: white;
  border-radius: 50%;
  border: ($size / 20) solid $black;
  position: relative;
  margin: ($size * 4 / 5);
  z-index: 1;

  &:after, 
  &:before {
    content: '';
    display: block;
    width: $size;
    height: $size / 2;
    border-radius: $size $size 0 0;
    border: ($size / 20) solid $black;
    z-index: -1;
    position: absolute;
  }

  &:after {
    background: $red;
    top: -$size / 2;
    left: -$size / 2;
  }

  &:before {
    background: $white;
    top: 0;
    left: -$size / 2;
    transform: rotate(180deg);
  }
}

The HTML:

<div class="pokeball"></div>
Zack
  • 657
  • 5
  • 16
  • `z-index: 0` makes the parent establish a stacking context, and then it's not possible. Just remove that. Possible duplicate of [CSS :after behind parent element](http://stackoverflow.com/q/34190157/1529630) or [HTML: Get a child element to show behind (lower z-index) than its parent?](http://stackoverflow.com/q/2503705/1529630) – Oriol May 12 '16 at 20:51
  • Thanks, @Oriol. Interestingly now it just disappears during the animation. – Zack May 13 '16 at 20:33

1 Answers1

0

Instead of using two semicircle elements with the pseudo :before and :after elements, you can use a linear and radial gradient to fill the circles.

http://codepen.io/zthall/pen/KzYKJZ

Zack
  • 657
  • 5
  • 16