Question

由于parent有overflow-y（在我的实际项目中必不可少），因此在悬停时不会显示menu-item。

是否有任何解决方法，以便parent仍有overflow设置，并且在我的代码中悬停时会显示menu-item？

＆＃13;

#parent {
  height: 100px;
  width: 100px;
  margin: 10px auto;
  background-color: antiquewhite;
  right: 0;
  top: 0;
  overflow-y: auto;
  list-style: none;
  padding: 0;
}
.menu-item {
  position: relative;
}
.menu-item:hover #popup {
  display: block;
}
#popup {
  position: absolute;
  top: 0;
  right: 108%;
  border: 1px solid red;
  background: red;
  color: #fff;
  display: none;
}

＆＃13;

<ul id="parent">
  <li class='menu-item'>
    Menu Title 1
    <div id="popup">
      <p>Popup data</p>
    </div>
  </li>
  <li>Menu 2</li>
  <li>Menu 3</li>
  <li>Menu 4</li>
</ul>

＆＃13;

http://codepen.io/anon/pen/BLRBLk

Answer 1

绝对定位的弹出窗口仅限于nearest positioned ancestor的边界。在这种情况下，这是.menu-item列表项，其中包含position: relative。

此列表项是ID为ul的{{1}}的子项，其中parent规则隐藏了弹出窗口。

一种解决方法是从overflow-y: auto删除position: relative。

这会从.menu-item的范围释放弹出窗口，并且没有其他定位的祖先，使其相对于初始包含块（并且不再受父级ul规则约束）

overflow

#parent {
  height: 100px;
  width: 100px;
  margin: 10px auto;
  background-color: antiquewhite;
  right: 0;
  top: 0;
  overflow-y: auto;
  list-style: none;
  padding: 0;
}
.menu-item {
  /* position: relative; */
}
.menu-item:hover #popup {
  display: block;
}
#popup {
  position: absolute;
  /* right: 108%; */
  border: 1px solid red;
  background: red;
  color: #fff;
  display: none;
  top: 10px;
  left: 50%;
  transform: translateX(-200%);
}

由于父母的溢出设置，定位的孩子不会显示

1 个答案: