title: I'm having an issue with the z-indexes of a logo I made with CSS, why isn't it displaying properly?
body: <p>For a school project I'm designing a website and I'm trying to incorporate an animated logo into the website, but I can't get all the components to display properly. You can view the live website here: <a href="http://students.washington.edu/torinw/anxiety/" rel="nofollow noreferrer">http://students.washington.edu/torinw/anxiety/</a></p>
  
  <pre><code>&lt;div id="logo"&gt;
          &lt;div id="left"&gt;
              &lt;div class="circle"&gt;&lt;/div&gt;
              &lt;div class="tail"&gt;&lt;/div&gt;
              &lt;div class="dot"&gt;&lt;/div&gt;
              &lt;div class="clip"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="right"&gt;
              &lt;div class="circle"&gt;&lt;/div&gt;
              &lt;div class="tail"&gt;&lt;/div&gt;
              &lt;div class="dot"&gt;&lt;/div&gt;
              &lt;div class="clip"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="top"&gt;
              &lt;div class="circle"&gt;&lt;/div&gt;
              &lt;div class="tail"&gt;&lt;/div&gt;
              &lt;div class="alpha"&gt;&lt;/div&gt;
              &lt;div class="dot"&gt;&lt;/div&gt;
              &lt;div class="clip"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="bottom"&gt;
              &lt;div class="circle"&gt;&lt;/div&gt;
              &lt;div class="tail"&gt;&lt;/div&gt;
              &lt;div class="alpha"&gt;&lt;/div&gt;
              &lt;div class="dot"&gt;&lt;/div&gt;
              &lt;div class="clip"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS: </p>
  
  <pre><code>#logo {
  height: var(--logo-size);
  width: var(--logo-size);
  top: 0;
  bottom: 0;
  margin: auto;
  position: relative;
  background: #1752a1;
  }
  
  #left, #right {
  width: calc(var(--logo-size) / 2);
  height: var(--logo-size);
  margin-top: 0;
  bottom: 0;
  position: absolute;
  border-bottom-left-radius: 50%;
  overflow: hidden;
  }
  
  .circle {
  position: absolute;
  bottom: 50%;
  left: 0;
  border-top-left-radius: calc(var(--logo-size) / 4);
  border-top-right-radius: calc(var(--logo-size) / 4);
  background-color: rgba(0,0,0,.5);
  height: calc(var(--logo-size) / 4);
  width: calc(var(--logo-size) / 2);
  z-index: 3;
  }
  
  .dot, .alpha {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 10%;
  width: 20%;
  margin: auto;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  z-index: 4;
  }
  
  .alpha {
  background-color: rgba(0,0,0,.5);
  z-index: 5;
  }
  
  .tail {
  position: absolute;
  bottom: 0;
  border-bottom-left-radius: 100%;
  background-color: rgba(0,0,0,.5);
  height: calc(var(--logo-size) / 2);
  width: calc(var(--logo-size) / 2);
  overflow: hidden;
  z-index: 1;
  }
  
  .clip {
  position: absolute;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  background-color: #1752a1;
  bottom: 0;
  left: 50%;
  width: calc(var(--logo-size) / 2);
  height: calc(var(--logo-size) / 2);
  z-index: 2;
  }
  
  #right {
  left: 50%;
  position: relative;
  transform: rotate(180deg);
  }
  
  #top, #bottom {
  display: inline;
  width: calc(var(--logo-size) / 2);
  height: var(--logo-size);
  left: calc(var(--logo-size) / 4);
  bottom: calc(var(--logo-size) / 4);
  position: absolute;
  overflow: hidden;
  transform: rotate(90deg);
  }
  
  #bottom {
  transform: rotate(270deg);
  top: calc(var(--logo-size) / 4);
  }
  
  #top .circle, #top .tail, #bottom .circle, #bottom .tail {
  background-color: white;
  }
  
  #top .dot, #top .clip, #bottom .dot, #bottom .clip {
  position: absolute;
  background-color: #1752a1;
  }
  </code></pre>
  
  <p>You'll see I have it broken into 4 segments, and each segment has the same 4 or 5 divs for the parts of the pseudo yin-yang logo I made: a half circle, a dot and/or alpha channel (for coloring purposes, as I plan on adding the ability to change themes), a tail quarter circle, and a 'clip' div that matches the background and completes the arched tail shape for when I get to animating it. I have the z-indexes set as the following, in order of increasing indexes: tail, clip, circle, dot, alpha. This way the clip covers up the tail, another div's circle overlaps the other's clip, etc.</p>
  
  <p>The left, right, and top divs seem to display exactly how I intend them to, with the layers overlapping properly inbetween divs. But for some reason the bottom div doesn't follow by the same rules. Its half circle and dot is being covered but by both the left's tail and clip divs, and the bottom's clip div is covering up the right's circle and dot divs. </p>
  
  <p>Why is it behaving this way? Is there something about the way I'm trying to code the logo that simply doesn't work? If you have a suggestion for an alternative way of going about it I'd be open to the idea as well.</p>