相对定位父元素的溢出绝对定位伪元素设置为溢出：隐藏

Question

I'm making a skull wearing a hat via CSS ( jolly roger ) which can be found at this codepen .

In the hat section, the lower edge of it has to be overflowed out of the parent div while the stripe in hat has to have overflow:hidden .
You may open the codepen link in both firefox and chrome to spot the difference.

While my code works fine in Firefox, this doesn't seem to work in chrome. I've tried many solutions that tells about how to position absolute items in a relative parent with overflow:hidden but none of those seem to work. Maybe I'm missing something important.

HTML

<div class="skull">
  <div class="skull__face skull__face--animate">
    <div class="skull__upper">
      <div class="skull__hat"></div>
      <div class="skull__nose"></div>
    </div>
    <div class="skull__lower">
      <div class="skull__jaw"></div>
    </div>
  </div>
  <div class="skull__bone skull__bone--left"></div>
  <div class="skull__bone skull__bone--right"></div>
</div>

CSS

.skull__upper, .skull__lower {
  background-color: white;
  border: 7px solid black;
  display: flex;
}

.skull__lower::before, .skull__jaw::before, .skull__jaw::after {
  content: "";
  width: 7px;
  height: 6rem;
  background-color: black;
  display: inline-block;
  position: absolute;
  bottom: -1.6rem;
  left: 0px;
  right: 0px;
  margin: auto;
}

@-webkit-keyframes boneDance {
  0% {
    -webkit-transform-origin: 49% 0%;
            transform-origin: 49% 0%;
  }
  50% {
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
  }
  100% {
    -webkit-transform-origin: 51% 0%;
            transform-origin: 51% 0%;
  }
}

@keyframes boneDance {
  0% {
    -webkit-transform-origin: 49% 0%;
            transform-origin: 49% 0%;
  }
  50% {
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
  }
  100% {
    -webkit-transform-origin: 51% 0%;
            transform-origin: 51% 0%;
  }
}
@-webkit-keyframes skullDance {
  0% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-1deg);
            transform: rotate(-1deg);
  }
}
@keyframes skullDance {
  0% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-1deg);
            transform: rotate(-1deg);
  }
}
@-webkit-keyframes blink {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
@keyframes blink {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
body {
  background-color: #191919;
}

@media only screen and (max-width: 600px) {
  body {
    font-size: 12px;
  }
}
.skull {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10vh;
}
.skull__face {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 50;
  position: relative;
}
.skull__face::after {
  content: "";
  width: 13rem;
  border-radius: 50%;
  box-shadow: 0px 0px 12rem 0 white;
  position: absolute;
  display: block;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.skull__face--animate:hover {
  -webkit-animation: skullDance 1s steps(3) infinite alternate;
          animation: skullDance 1s steps(3) infinite alternate;
  cursor: none;
}
.skull__face--animate:hover::after {
  opacity: 1;
  -webkit-animation: blink 1s linear infinite alternate;
          animation: blink 1s linear infinite alternate;
}
.skull__face--animate:hover ~ .skull__bone {
  -webkit-animation: boneDance 1s steps(3) infinite alternate;
          animation: boneDance 1s steps(3) infinite alternate;
}
.skull__upper {
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  z-index: 50;
  position: relative;
}
.skull__upper::before, .skull__upper::after {
  content: "";
  display: block;
}
.skull__upper::before {
  position: absolute;
  border-radius: 50%;
  box-shadow: 5.5rem 13.5rem 0px 2.8rem black, 14.5rem 13.5rem 0px 2.8rem black;
  width: 1px;
  height: 1px;
  background-color: transparent;
}
.skull__hat {
  justify-content: center;
  background-color: #FFD020;
  width: 20rem;
  height: 10rem;
  z-index: 45;
  border-top-left-radius: calc(10rem + 7px);
  border-top-right-radius: calc(10rem + 7px);
  overflow: hidden;
}
.skull__hat::before, .skull__hat::after {
  content: "";
  display: block;
  left: 0px;
  right: 0px;
  margin: auto;
}
.skull__hat::after {
  height: 1rem;
  background-color: #FFD020;
  position: absolute;
  border: 7px solid black;
  border-radius: 1rem;
  width: 30rem;
  left: -5.5rem;
}
.skull__hat::before {
  width: 18.5rem;
  height: 0;
  position: relative;
  border-bottom: 3rem solid #FF0012;
  border-left: 0.75rem solid transparent;
  border-right: 0.75rem solid transparent;
  margin-top: 5.35rem;
  box-shadow: 0px 0px 0px 0px #191919, 0px -7px 0px 0px black;
}
.skull__lower {
  width: 14rem;
  height: 16rem;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  z-index: 49;
  margin-top: -7rem;
  overflow: hidden;
  position: relative;
}
.skull__lower::before {
  bottom: 4.5rem;
  z-index: 40;
}
.skull__nose {
  width: 3rem;
  height: 2rem;
  background: black;
  border-radius: 50%;
  position: absolute;
  bottom: 2rem;
  left: 0px;
  right: 0px;
  margin: auto;
}
.skull__jaw {
  width: 21rem;
  height: 21rem;
  border-radius: 50%;
  border: 7px solid black;
  position: absolute;
  margin: auto;
  top: -12.5rem;
  left: -4rem;
  box-shadow: 0px 1.8rem 0px 0px white, 0px 2.2rem 0px 0px black;
}
.skull__jaw::before {
  margin-left: 6.6rem;
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
}
.skull__jaw::after {
  margin-right: 6.6rem;
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
.skull__bone {
  background: white;
  height: 3rem;
  width: 36rem;
  position: absolute;
  border: 7px solid black;
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
}
.skull__bone::before, .skull__bone::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  top: -1.5rem;
  width: 3rem;
  height: 3rem;
  background: white;
}
.skull__bone::before {
  left: -1.5rem;
}
.skull__bone::after {
  right: -1.5rem;
}
.skull__bone--left {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.skull__bone--left::before {
  box-shadow: 0 3rem 0 white, -2px 3.1rem 0px 2px black, -2px -0.1rem 0px 2px black;
}
.skull__bone--left::after {
  box-shadow: 0 3rem 0 white, 3px 3.1rem 0px 1px black, 2px -0.1rem 0px 2px black;
}
.skull__bone--right {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.skull__bone--right::before {
  box-shadow: 0 3rem 0 white, -2px 3.1rem 0px 2px black, -2px -0.1rem 0px 2px black;
}
.skull__bone--right::after {
  box-shadow: 0 3rem 0 white, 3px 3.1rem 0px 1px black, 2px -0.1rem 0px 2px black;
}

Any suggestions to make it work at least in Firefox and Chrome.

Answer 1

Just removing the z-index from the .skull__hat class did the trick.

 .skull__upper, .skull__lower { background-color: white; border: 7px solid black; display: flex; } .skull__lower::before, .skull__jaw::before, .skull__jaw::after { content: ""; width: 7px; height: 6rem; background-color: black; display: inline-block; position: absolute; bottom: -1.6rem; left: 0px; right: 0px; margin: auto; } @-webkit-keyframes boneDance { 0% { -webkit-transform-origin: 49% 0%; transform-origin: 49% 0%; } 50% { -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } 100% { -webkit-transform-origin: 51% 0%; transform-origin: 51% 0%; } } @keyframes boneDance { 0% { -webkit-transform-origin: 49% 0%; transform-origin: 49% 0%; } 50% { -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } 100% { -webkit-transform-origin: 51% 0%; transform-origin: 51% 0%; } } @-webkit-keyframes skullDance { 0% { -webkit-transform: rotate(1deg); transform: rotate(1deg); } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-1deg); transform: rotate(-1deg); } } @keyframes skullDance { 0% { -webkit-transform: rotate(1deg); transform: rotate(1deg); } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-1deg); transform: rotate(-1deg); } } @-webkit-keyframes blink { from { opacity: 0.4; } to { opacity: 1; } } @keyframes blink { from { opacity: 0.4; } to { opacity: 1; } } body { background-color: #191919; } @media only screen and (max-width: 600px) { body { font-size: 12px; } } .skull { display: flex; justify-content: center; align-items: center; margin-top: 10vh; } .skull__face { display: flex; flex-direction: column; align-items: center; z-index: 50; position: relative; } .skull__face::after { content: ""; width: 13rem; border-radius: 50%; box-shadow: 0px 0px 12rem 0 white; position: absolute; display: block; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .skull__face--animate:hover { -webkit-animation: skullDance 1s steps(3) infinite alternate; animation: skullDance 1s steps(3) infinite alternate; cursor: none; } .skull__face--animate:hover::after { opacity: 1; -webkit-animation: blink 1s linear infinite alternate; animation: blink 1s linear infinite alternate; } .skull__face--animate:hover ~ .skull__bone { -webkit-animation: boneDance 1s steps(3) infinite alternate; animation: boneDance 1s steps(3) infinite alternate; } .skull__upper { width: 20rem; height: 20rem; border-radius: 50%; z-index: 50; position: relative; } .skull__upper::before, .skull__upper::after { content: ""; display: block; } .skull__upper::before { position: absolute; border-radius: 50%; box-shadow: 5.5rem 13.5rem 0px 2.8rem black, 14.5rem 13.5rem 0px 2.8rem black; width: 1px; height: 1px; background-color: transparent; } .skull__hat { justify-content: center; background-color: #FFD020; width: 20rem; height: 10rem; border-top-left-radius: calc(10rem + 7px); border-top-right-radius: calc(10rem + 7px); overflow: hidden; } .skull__hat::before, .skull__hat::after { content: ""; display: block; left: 0px; right: 0px; margin: auto; } .skull__hat::after { height: 1rem; background-color: #FFD020; position: absolute; border: 7px solid black; border-radius: 1rem; width: 30rem; left: -5.5rem; } .skull__hat::before { width: 18.5rem; height: 0; position: relative; border-bottom: 3rem solid #FF0012; border-left: 0.75rem solid transparent; border-right: 0.75rem solid transparent; margin-top: 5.35rem; box-shadow: 0px 0px 0px 0px #191919, 0px -7px 0px 0px black; } .skull__lower { width: 14rem; height: 16rem; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; z-index: 49; margin-top: -7rem; overflow: hidden; position: relative; } .skull__lower::before { bottom: 4.5rem; z-index: 40; } .skull__nose { width: 3rem; height: 2rem; background: black; border-radius: 50%; position: absolute; bottom: 2rem; left: 0px; right: 0px; margin: auto; } .skull__jaw { width: 21rem; height: 21rem; border-radius: 50%; border: 7px solid black; position: absolute; margin: auto; top: -12.5rem; left: -4rem; box-shadow: 0px 1.8rem 0px 0px white, 0px 2.2rem 0px 0px black; } .skull__jaw::before { margin-left: 6.6rem; -webkit-transform: rotate(10deg); transform: rotate(10deg); } .skull__jaw::after { margin-right: 6.6rem; -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .skull__bone { background: white; height: 3rem; width: 36rem; position: absolute; border: 7px solid black; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } .skull__bone::before, .skull__bone::after { content: ""; position: absolute; border-radius: 50%; top: -1.5rem; width: 3rem; height: 3rem; background: white; } .skull__bone::before { left: -1.5rem; } .skull__bone::after { right: -1.5rem; } .skull__bone--left { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .skull__bone--left::before { box-shadow: 0 3rem 0 white, -2px 3.1rem 0px 2px black, -2px -0.1rem 0px 2px black; } .skull__bone--left::after { box-shadow: 0 3rem 0 white, 3px 3.1rem 0px 1px black, 2px -0.1rem 0px 2px black; } .skull__bone--right { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .skull__bone--right::before { box-shadow: 0 3rem 0 white, -2px 3.1rem 0px 2px black, -2px -0.1rem 0px 2px black; } .skull__bone--right::after { box-shadow: 0 3rem 0 white, 3px 3.1rem 0px 1px black, 2px -0.1rem 0px 2px black; }

 <div class="skull"> <div class="skull__face skull__face--animate"> <div class="skull__upper"> <div class="skull__hat"></div> <div class="skull__nose"></div> </div> <div class="skull__lower"> <div class="skull__jaw"></div> </div> </div> <div class="skull__bone skull__bone--left"></div> <div class="skull__bone skull__bone--right"></div> </div>