iframe мешает работать z-index? - PullRequest
7 голосов
/ 14 ноября 2011

Я пытался использовать атрибут z-index css, чтобы один элемент всегда был перед другим, но он не работает. Z-индекс одного элемента явно больше, чем у другого, но он все еще находится позади другого элемента. Может быть потому, что один из элементов (тот, что появляется впереди) - это iframe? У кого-нибудь есть другие советы?

Ответы [ 2 ]

5 голосов
/ 15 ноября 2011

Помните, что индекс z-index рассчитывает только на абсолютные элементы. Оба элемента должны иметь положение: абсолютное. Больше информации в спецификации CSS 2.1

1 голос
/ 12 апреля 2018

Для тех, кто прибывает сюда позже, правильный ответ - поставить position: relative; или любой другой position реквизит на проблемные элементы.

Я бы рекомендовал поставить это на каждый элементс проблемой:

position: relative;
z-index: 0;

, а затем увеличьте z-index для самого заднего элемента (элементов) перед iframe.

Если вы это сделаете, вы будетеначать выигрывать довольно быстро.

В моем тестировании здесь, z-index работает, только если вы явно указали position.Проверьте это, смодулировав значения z-index, а затем попытавшись выделить текст на экране, щелкнув мышью.Вы должны увидеть свидетельство того, что слои действуют как угодно или ужасно неправильно.

Я считаю, что это прекрасно работает, если вы нажмете F12 (чтобы открыть панель разработчика в Chrome), а затем нажмете кнопку Inspectв верхнем левом углу или нажмите CTRL + SHIFT + C .Затем вы можете навести курсор мыши на все и посмотреть, какой контекст их размещения относится к смежным элементам.

СОВЕТ ПО БОНУСУ UX : помните, что пользователи могут захотеть скопировать текст, поэтому убедитесь, что они могутвыберите его.

Если у вас возникли проблемы, скорее всего, вы либо:

  1. отсутствует position: relative; в родительском элементе, либо
  2. отсутствуетz-index: 0; где-то
...