Css 如何"；浮动；绝对定位的元素div从其容器中取出

下面是（简化的）场景。我有一个div，其中包含另一个div。外部div大小固定，有滚动条和相对位置。内部div比外部div大，并且相对于外部div定位。我希望内部div完全可见，在外部div上方“浮动”

我欣赏这听起来有点做作，因为用这种方式限制外部div的大小是没有意义的。它是。但在实际应用程序中，外部div中还有其他内容需要使用滚动条进行控制

我如何做到这一点，单独使用css？请注意，内部div必须相对于外部div进行定位，因此不能使用position:fixed

标记：

  <div id="container">
    <div id="popup">Popup Text</div>
  </div>

---

这里有一个

您可以添加额外的包装器，并将

位置：相对

和

溢出

设置为不同的包装器： HTML

小提琴：

“秘密”是

…影响除任何元素外的所有元素内容的剪辑 子元素（及其各自的内容和子元素） 其包含的块是视口或元素的祖先

---

绝对定位元件的最接近的ascestor为非静态

位置

。因此，当带有

溢出

的元素未定位自身时，它不会剪裁绝对定位的子体。

您可以添加额外的包装器，并将

位置：相对

和

溢出

设置为不同的包装器： HTML

小提琴：

“秘密”是

…影响除任何元素外的所有元素内容的剪辑 子元素（及其各自的内容和子元素） 其包含的块是视口或元素的祖先

---

绝对定位元件的最接近的ascestor为非静态

位置

。因此，当带有

溢出

的元素本身未定位时，它不会剪裁绝对定位的子元素。

是否有理由该元素必须是子元素而不能是同级元素？因为父元素中隐藏了溢出，否。@Patsy:如果溢出被隐藏，则不起作用：是否有理由此元素必须是子元素而不能是兄弟元素？因为父元素中隐藏了溢出，否。@Patsy:如果溢出被隐藏，则不起作用：哇，这很神秘，但它起作用！很好的解释。唯一的问题是我无法控制包含块在视口中的事实（我希望我正确使用这些术语）。实际应用程序使用的网格组件的正确表示取决于各种预定义样式。还有其他方法解决这个问题吗？@PaulTaylor，如果标记在您的控制下，您可以添加这个额外的包装器并将

position:relative

移动到其中，那么预定义的样式应该不会有问题。标记的一部分在我的控制下，但不幸的是，我无法改变这样一个事实，即我感兴趣的元素与设置了

溢出：scroll

的元素之间有一个相对定位的祖先。不幸的是，对于这种情况，我不知道解决方案（Ilya，考虑到我最初概述的场景，这肯定是答案。谢谢！哇，这很深奥，但很有效！很好的解释。唯一的问题是我无法控制包含块在视口中的事实（我希望我正确使用这些术语）。实际应用程序使用的网格组件的正确表示取决于各种预定义样式。是否有其他方法解决此问题？@PaulTaylor，如果标记在您的控制下，您可以添加此额外包装器并将

位置：相对
移动到它，则预定义样式应该不会有问题rkup在我的控制之下，但不幸的是，我无法改变这样一个事实，即我感兴趣的元素在它和设置了
溢出：scroll
的元素之间有一个相对定位的祖先。不幸的是，对于这种情况，我不知道解决方案（伊利亚，考虑到我最初概述的情景，这肯定是答案。谢谢！
#container{ 
  overflow: scroll;
  height:50px;
  width:50px;
  position:relative;
}
#popup {
  position:absolute;
  top:20px;
  border:1px solid #000;
  height:100px;
  width:100px;
}

  <div id="base">
      <div id="container">
        <div id="popup">Popup Text</div>
      </div>
  </div>

#base {
  height:50px;
  width:50px;
  position:relative;
}
#container{ 
  overflow: scroll;
  height:100%;
  width:100%;
}
#popup {
  position:absolute;
  top:20px;
  border:1px solid #000;
  height:100px;
  width:100px;
}