почему элемент html обрезается

Question

Я пытаюсь создать пользовательский элемент управления c, который будет иметь раскрывающийся список автозаполнения. Обычно я go обхожу это путем создания вложенного элемента position:relative;, за которым следует дочерний элемент с position:absolute;

Но по какой-то причине, когда я попробовал его на моем контроле в ioni c контроль получен. Первоначально я думал, что назначить простое z-index должно было бы добиться цели, но, к моему удивлению, это не имело никакого эффекта. При некотором внимательном прочтении это как-то связано с контекстами суммирования; что еще хуже, кажется, что ioni c также помечает элементы .item-md как position:relative

Любая идея, как я мог бы сделать простой пример, как эта работа?

Редактировать:

Я пытался воспроизвести случай в более простой настройке, но в целом, похоже, моя концепция должна работать. Когда я помещаю его внутрь ioni c, оно снова обрезается.

https://jsfiddle.net/4exLpcv5/

Answer 1

После долгих раздумий и осмотра дерева доменов я смог частично воссоздать проблему в jsfiddle. overflow: visible, как упомянуто @willactual, является частью awnser.

Иони c .item имеют переполнение, скрытое. Который заставляет браузер обрезать рендеринг. Когда я сбрасываю переполнение на видимое, по крайней мере, в моем минимальном отдыхе, оно ведет себя как обычно Тем не менее, пытаясь привести мой пример в реальное приложение ioni c, я все-таки сделал элемент обрезанным.

Теперь вторая часть решения, на которую я случайно наткнулся, - contain: content. Похоже, что на протяжении многих лет у CSS были некоторые дополнительные свойства, которые могли бы служить подсказками производительности. Будь то, что ioni c действительно использует эти подсказки и устанавливает свойство contain, которое в результате обрезает элемент html.

Answer 2

У меня была похожая ситуация. Попробуйте это для затронутого элемента:

overflow: visible;