为什么html元素会被裁剪

Question

我正在尝试创建一个自定义离子控件，该控件将具有自动完成下拉菜单。通常，我将通过创建position:relative;的嵌套元素，然后创建带有position:absolute;

的子元素来解决此问题

但是由于某种原因，当我在离子控制系统上尝试该控制时，该控制被截断了。最初，我认为分配一个简单的z-index应该可以解决问题，但令我惊讶的是，它没有任何效果。通过仔细阅读，它似乎与堆栈上下文有关。更糟的是，离子似乎也将元素.item-md标记为position:relative

任何想法我怎么能做一个像这样的简单例子？

编辑：

我试图以更简单的设置重现此案，但总的来说，我的想法似乎可行。当我将其放入离子型容器中时，它会再次被剪断。

Answer 1

我有类似的情况。尝试对受影响的元素进行此操作：

overflow: visible;

Answer 2

[经过大量摆弄并检查了dom树之后，我能够在jsfiddle中重新创建问题。 @willactual提到的overflow: visible是遮篷的一部分。

Ionic的.item已将溢出设置为隐藏。这会强制浏览器剪辑出边界渲染。当我至少在最小的娱乐活动中将溢出重置为可见时，它的行为正常。但是，尝试将我的示例应用到实际的离子应用程序中，仍然使元素受到限制。

现在我偶然发现的解决方案的第二部分是contain: content。多年来，CSS似乎具有一些额外的属性来充当性能提示。就是说，离子离子实际上利用了这些提示并设置了contain属性，该属性最终裁剪了html元素。