为什么 html 元素被剪裁
why does html element get clipped
我正在尝试创建一个自定义离子控件，它将具有自动完成下拉列表。通常我如何解决这个问题是创建一个 position:relative; 的嵌套元素，然后是一个 position:absolute;
的子元素
但出于某种原因，当我在我的离子控件上尝试它时，控件被截断了。最初我认为分配一个简单的 z-index 应该可以解决问题，但令我惊讶的是它没有任何效果。仔细阅读后，它似乎与堆栈上下文有关；更糟糕的是，ionic 似乎还将元素 .item-md 标记为 position:relative
知道如何制作像这样的简单示例吗？
编辑：
我尝试在更简单的设置中重现该案例，但总的来说，我的概念似乎应该可行。当我把它放在 ionic 里面时，它又被剪掉了。
https://jsfiddle.net/4exLpcv5/
我也遇到过类似的情况。对受影响的元素试试这个：
overflow: visible;
经过大量摆弄和检查 dom 树后，我能够在 jsfiddle 中部分重现问题。 @willactual 提到的 overflow: visible 是 awnser 的一部分。
Ionic 的 .item 已将溢出设置为隐藏。这会强制浏览器剪辑超出边界渲染。当我至少在我的最小娱乐活动中将溢出重置为可见时，它表现正常。然而，试图将我的示例带入实际的离子应用程序中，仍然使元素被剪裁。
现在，我偶然发现的解决方案的第二部分是 contain: content。多年来 CSS 似乎有一些额外的属性可以作为性能提示。不管怎样，ionic 实际上利用了这些提示并设置了 contain 属性 结果剪辑了 html 元素。
我正在尝试创建一个自定义离子控件，它将具有自动完成下拉列表。通常我如何解决这个问题是创建一个 position:relative; 的嵌套元素，然后是一个 position:absolute;
但出于某种原因，当我在我的离子控件上尝试它时，控件被截断了。最初我认为分配一个简单的 z-index 应该可以解决问题，但令我惊讶的是它没有任何效果。仔细阅读后，它似乎与堆栈上下文有关；更糟糕的是，ionic 似乎还将元素 .item-md 标记为 position:relative
知道如何制作像这样的简单示例吗？
编辑：
我尝试在更简单的设置中重现该案例，但总的来说，我的概念似乎应该可行。当我把它放在 ionic 里面时，它又被剪掉了。
https://jsfiddle.net/4exLpcv5/
我也遇到过类似的情况。对受影响的元素试试这个：
overflow: visible;
经过大量摆弄和检查 dom 树后，我能够在 jsfiddle 中部分重现问题。 @willactual 提到的 overflow: visible 是 awnser 的一部分。
Ionic 的 .item 已将溢出设置为隐藏。这会强制浏览器剪辑超出边界渲染。当我至少在我的最小娱乐活动中将溢出重置为可见时，它表现正常。然而，试图将我的示例带入实际的离子应用程序中，仍然使元素被剪裁。
现在，我偶然发现的解决方案的第二部分是 contain: content。多年来 CSS 似乎有一些额外的属性可以作为性能提示。不管怎样，ionic 实际上利用了这些提示并设置了 contain 属性 结果剪辑了 html 元素。