Ужасная маленькая ошибка, эта.
Как показано в Android-билет 6721, браузер Android, похоже, не уважает z-индекс, когда абсолютно позиционированные элементы лежат поверх <a> или <input>.
Я отчаянно нуждаюсь в каком-то обходном пути. Кто-нибудь победил это раньше?
Спасибо заранее!
Эта проблема, вероятно, связана с элементами управления и их особенностью для браузера. Рассматривая проблему (в хроме), я обнаружил связанную проблему, что при нажатии клавиши табуляции вы все равно сможете сфокусировать элементы ввода. Вы, вероятно, тоже этого не хотите (независимо от истечения кровеносных сосудов). Решение на удивление прост, вы пишете свой script, чтобы добавить атрибут disabled ко всем входам/кнопкам/и т.д. элементы, которые наложены. Отключенный вход будет не сможет получать фокус (с клавиатуры или иначе), и щелчок на нем невозможен.
Поскольку это также отключает глупую круговую циркуляцию клавиатуры, это даже не обходное решение, а лучший дизайн, который также работает с навигацией на основе клавиатуры, как и ожидалось.
Чтобы правильно ответить на вопрос, важно прочитать страницу с ошибкой. Проблема заключается не в том, чтобы видеть информацию ниже, а в ее "кликабельности".
Я не могу проверить это, но это возможные обходные пути:
0 Забудьте о абсолютном позиционировании и просто разместите там два div и переключите видимость.
Если это не удовлетворяет вам...
1 попробуйте установить позицию CSS в абсолютную или относительную для всех тегов a и input (возможно, это заставит вас переписать CSS для сохранения макета, но не стоит это?)
2 создайте контейнер <a> -tag:
<div style="z-index:100 etc."><a style="width: 100%; height:100%; z-index:101">
stuff here
</a></div>
Это потребует еще нескольких CSS, чтобы содержимое выглядело нормально. Но я ожидаю, что что-то подобное решит проблему.
если 1 и 2 не помогают сразу попробовать оба;)
3, если это все еще возможно. Вы можете проверить, что происходит, когда вы нажимаете. Свяжите клик и события mousedown с: link on top, container on top, input in the bottom и запишите их. Если вы получите какое-либо из этих событий для верхней ссылки, вы можете попытаться остановить барботаж в какой-то момент или предотвратить событие на входе внизу.
Это будет сложно, но я могу немного помочь. jQuery был бы необходим.
Прошлые исправления для этой проблемы для IE включают, но, вероятно, не ограничиваются следующим списком. Они могут помочь решить проблему в Android для вас.
Поместите iframe за абсолютный контент. Iframe может скрывать эти элементы для вас.
Когда вы показываете свой абсолютный контент, скройте все элементы проблемы с помощью JavaScript
Определите div в обратном порядке
Точка № 1 считается самым надежным исправлением для IE, но не может быть лучшим решением для вас.
Добавьте это в CSS каждого элемента, который создает проблему:
-webkit-backface-visibility: hidden;
Имитировать INPUT и A с DIV.
[PSEUDO JQUERY CODE]
<div href="http://google.com" rel="a">Link</div>
<div class="field">
<div></div>
<input type="text" style="display: none" />
</div>
<script>
$('div[rel=a]).click(function() {
location.href = $(this).attr('href');
});
$('.field > div').click(function() {
$(this).hide();
$('.field > input').show();
});
$('.field > input').blur(function() {
$(this).hide();
$('.field > div').html($(this).val()).show();
});
</script>
IE имеет эту же проблему, и решение заключается в том, чтобы каждый элемент, который участвует в позиционировании и даже в своих контейнерах, применял к ним z-индекс. В принципе, если вы добавите z-index в 1 элемент в dom, тогда IE поймет его позицию z, но не понимает его позицию z относительно того, что ее следующая и/или более.
container - z-index 0
ребенок (на верхнем контейнере) - z-index 1
ребенок 2 (прежде всего) - z-index 999
Конечно, все это основано на глупом IE, но его стоит попробовать и в android.
Вторая попытка:)
Я вообще не знаком с браузером Android, но я надеюсь, что, возможно, приведу вас к пути решения вашей проблемы. Superfish - это javascript-меню, в котором реализовано решение для пунктов меню z-index, когда они выпадают над блоками выбора в браузерах. BgIframe - это js, который они используют для достижения этого. Надеюсь, ваш ответ может лежать.
Поместите под html в div и установите отображение: none с помощью javascript, поэтому содержимое под заголовком отсутствует, вместо того, чтобы быть кликабельным и модальным.
если вы хотите решить эту проблему, прежде всего, вы должны добавить z-index в родительскую оболочку и явно добавить z-index в свои другие элементы, решение состоит в том, что все элементы будут иметь нулевую точку для хранения свойства z-index правильно