html - 固定元素受溢出影响 :hidden Parent

Question

运行代码片段并查看工具提示元素。它具有 position: fixed CSS 属性。它应该是相对于视口(viewport)的。为什么会受到父级overflow:hidden的影响？ (overflow:hidden 的父级是 .shirts-list__illustration)

.shirts-list {
  margin: -52px -16px;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
}

.shirts-list__item {
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  width: 25%;
  padding: 52px 16px;
}

.shirts-list__block {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-top: 16px;
  padding-bottom: 16px;
  border: 1px solid #e6e6e6;
  align-items: center;
  position: relative;
}

.shirts-list__title,
.shirts-list__sub-title {
  text-align: center;
}

.shirts-list__title {
  font-family: gibsonsemibold;
  font-size: 15px;
  color: #535353;
  margin: auto 4px;
}

.shirts-list__sub-title {
  color: #8e8e8e;
}

.shirts-list__illustration {
  position: relative;
  padding-top: 8px;
  overflow: hidden;
  z-index: 0;
}

.shirts-list__img {
  width: 100%;
}

.shirts-list__colors {
  position: absolute;
  bottom: 0;
  left: 0;
  -ms-transform: translateY(100%);
  transform: translateY(0);
  padding: 16px;
  width: 85%;
  opacity: 1;
  visibility: visible;
  background-color: #ffffff;
  transition: .2s all ease-out;
}

.shirts-list__colors__title {
  display: block;
  font-size: 14px;
  text-align: center;
  color: #636363;
}

.shirts-list__colors__list {
  margin: 8px -2px -2px;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.shirts-list__colors__list__item {
  padding: 2px;
}

.shirts-list__colors__list__block {
  width: 20px;
  height: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  z-index: 1;
}

.shirts-list__action {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
}

.sidebar__logo {
  padding: 15px 15px 35px;
}

.color-tooltip-title.z-popover {
  background-color: #535353;
  border: 1px solid #535353;
  border-radius: 4px;
  color: #ffffff;
  padding: 8px;
  min-width: 88px;
  font-size: 13px;
  font-family: gibsonregular;
  text-align: center;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

.color-tooltip-title.z-popover:before {
  border-color: #535353;
  background: #535353;
}

[x-placement="right"]:before {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  height: 8px;
  width: 8px;
  background: #fff;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  border-bottom: 1px solid #b8b8b8;
  border-right: 1px solid #b8b8b8;
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
  left: -6px;
  z-index: -1;
}

[x-placement="left"]:before {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  height: 8px;
  width: 8px;
  background: #fff;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border-bottom: 1px solid #b8b8b8;
  border-right: 1px solid #b8b8b8;
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
  right: -6px;
  z-index: -1;
}

[x-placement="top"]:before {
  content: "";
  position: absolute;
  bottom: -6px;
  height: 8px;
  width: 8px;
  background: #fff;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-bottom: 1px solid #b8b8b8;
  border-right: 1px solid #b8b8b8;
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
  right: calc(50% - 5px);
  z-index: -1;
}

[x-placement="bottom"]:before {
  content: "";
  position: absolute;
  top: -6px;
  height: 8px;
  width: 8px;
  background: #fff;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
  border-bottom: 1px solid #b8b8b8;
  border-right: 1px solid #b8b8b8;
  -webkit-box-shadow: inherit;
  box-shadow: inherit;
  right: calc(50% - 5px);
  z-index: -1;
}

<div class="shirts-list__item product-item" data-id="1" data-group="1">
  <div class="shirts-list__block">
    <div class="shirt-name-flex"><span class="shirts-list__title product-title">Overflow Issue</span>
    </div>
    <div class="shirt-name-spacer"></div>
    <div class="shirts-list__illustration"><img class="shirts-list__img product-image" src="https://picsum.photos/id/1084/536/354" alt="">
      <div class="shirts-list__colors"><span class="shirts-list__colors__title">Lorem Ipsum</span>
        <ul class="shirts-list__colors__list product-colors">
          <li class="shirts-list__colors__list__item">
            <div class="shirts-list__colors__list__block product-color z-popover-hover athletic-heather" style="background-color: rgb(225, 229, 232);">
              <div class="z-popover color-tooltip-title" data-popover-placement="top" style="position: fixed; transform: translate3d(-28px, 9px, 0px); top: 0px; left: 0px; will-change: transform;" x-placement="top">athletic heather</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block :

If the position property is absolute or fixed, the containing block may also be formed by the edge of the padding box of the nearest ancestor element that has the following:

A transform or perspective value other than none

祖先 <div class="shirts-list__colors">具有 translateY(0) 的转换值.