Свойство z-index не работает с элементом внутри <ion-segment-button></ion-segment-button>

Свойство z-index не применяется к элементам внутри ion-segment-button.

Я попытался изменить положение элементов и установить z-индекс на 999999, а z-индекс кнопки на -1. Однако это не работает.

          <ion-segment-button
          class = "test">
          <ion-icon name = "document-text"></ion-icon>
          <ion-label>Test</ion-label>
          <div id = "helpParent" (click) = "test2()" style = "
              background: red;
              width: 200px;
              height: 200px;
              z-index: 999999;
          "><i id = "helpChild" (click) = "test2()" class = "far align-vertically fa-question-circle"
              style = "cursor: pointer;width: 24px;height: 24px;font-size: 20px;color: rgb(6, 54, 85);margin-left: 10px;z-index: 9999;"></i>
          </div>
          </ion-segment-button>

чего вы хотите добиться, добавив индекс z?

Mr. Stash 11.11.2022 05:54

Я хочу щелкнуть значок вопроса и показать всплывающее окно.

Prakash Khadka 11.11.2022 06:50

в контейнере события-указатели не установлены, поэтому, вероятно, событие щелчка не работает, я опубликовал ответ с решением.

Mr. Stash 11.11.2022 07:53
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
3
61
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Кнопка отображается внутри теневого корня, а элемент-контейнер имеет правило указателя-события: нет; поэтому вызывается метод test2.

Добавьте следующий код в файл style.css, метод test2 должен вызываться при нажатии на внутренний значок, и удалите событие щелчка из элемента helpParent, чтобы избежать множественных вызовов.

ion-segment-button::part(native) {
  pointer-events: all;
}

Другие вопросы по теме