Question

运行代码片段，然后查看工具提示元素。它具有position: fixed CSS属性。它应该是相对于视口的。为什么它受父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：

如果position属性为绝对或固定，则包含块   也可以由最近的填充框的边缘形成   祖先元素具有以下内容：
A transform or perspective value other than none

祖先<div class="shirts-list__colors">的变换值为translateY(0)。

Answer 2

让我们看一下CSS转换的W3规范：

https://www.w3.org/TR/css-transforms-1/#transform-rendering

具体来说，固定位置后代会发生什么：

对于其布局由CSS box模型控制的元素，任何值   除了非转换属性外，还会导致元素   为所有后代建立一个包含块。 其填充框将   用于为其所有绝对位置后代进行布局，   固定位置的后代和后代固定背景   附件。

示例6

要演示在固定位置后代上包含所有后代的包含块的效果，以下代码段的行为应相同：

 
     #container {
       width: 300px;
       height: 200px;
       border: 5px dashed black;
       padding: 5px;
       overflow: scroll;
     }
 
     #bloat {
       height: 1000px;
     }
 
     #child {
       right: 0;
       bottom: 0;
       width: 10%;
       height: 10%;
       background: green;
     }

 
     <div id="container" style="transform:translateX(5px);">
       <div id="bloat"></div>
       <div id="child" style="position:fixed;"></div>
     </div>
     versus
 
     <div id="container" style="position:relative; z-index:0; left:5px;">
       <div id="bloat"></div>
       <div id="child" style="position:absolute;"></div>
     </div>

在CSS中，父元素.shirts-list__colors具有transform: translateY(0)。这将导致子固定元素与其自身相关，并依次在父元素上被overflow: hidden切断。

固定元素受溢出影响：隐藏的父级

2 个答案: