Чтобы перейти непосредственно к делу: нет чистого решения только для CSS вашей проблемы.
Поскольку все ваши элементы в значительной степени идентичны (и под этим я подразумеваю class дляпример) вы не найдете решение, которое охватывает все конфигурации.Поскольку они не отличаются друг от друга, все они имеют одинаковый z-index, но не одинаковый контекст стека.Если вы не предоставите их родителям другой z-index или не измените контекст стека, вы не сможете получить доступ к заблокированному элементу.Это также сводится к тому, насколько вы ограничены в изменении кода.Код выглядит так, как будто он был собран JS, и вы просто скопировали его на скрипку, чтобы мы могли его протестировать.
Попытка # 1
Попытка # 1 - просто добавить максимум z-index напрямуюсоответствующему родителю.
@ mmshr уже пытался это сделать.Однако он попытался дать всему классу высокий z-index, что, конечно, не сработает, как вы уже указали.
Однако вы можете попытаться дать этому элементу только высокийЭлемент z-index в его атрибуте style.Это сводится к тому, насколько вы ограничены в изменении кода.Вы можете теоретически использовать JQuery для этого, но способ выбора элемента (например, nth-child()) приводит меня к Попытка # 2 , которая использует тот же псевдокласс и является попыткой только CSS, поэтому использованиеJS это ерунда в этом случае.Кстати, если вы можете изменить свой код таким образом, вы можете удалить свою маленькую функцию JQuery, которая добавляет класс forward к hover.
Попытка # 2
Эта попытка работает отлично, и вы не ограничены возможностью изменять код, так как это в значительной степени одна строка CSS.Как уже говорилось в Попытка # 1 , вы можете использовать pseudo-class, чтобы выбрать этот элемент.Однако это не действительно для всех конфигураций.Если вы добавите один элемент
(<div data-bind="template: { name: 'bracket-template', data: $data }">...</div>) до вашего заблокированного элемента, вам придется каждый раз менять свой CSS.Но если нет необходимости менять элементы и конфигурации (или, по крайней мере, не порядок), это правильное решение:
#bracket-wrapper > div > div:nth-child(8) > div > div {
z-index: 2 !important;
}
В этой попытке вы можете (и должны) удалить свою маленькую функцию JQuery тоже:
$('.bracket-part').hover(
function() {
debugger;
$(this).addClass('forward');
},
function() {
$(this).removeClass('forward');
}
);
Удалить все целиком.
Попытка # 3
Вероятно, самая чистая и лучшая попытка - использовать stacking context.Контекст стекирования объясняется прямо здесь .Но для простоты обзора ( W3C ):
Каждый блок относится к одному стековому контексту.Каждый позиционированный блок в данном контексте стека имеет целочисленный уровень стека, который является его позицией на оси z относительно других уровней стека в том же контексте стека.Ящики с более высокими уровнями стека всегда форматируются перед ячейками с более низкими уровнями стека.Коробки могут иметь отрицательные уровни стека.Ящики с одинаковым уровнем стека в контексте стекования располагаются задом наперед в соответствии с порядком дерева документов.
Наиболее важной является эта часть, поскольку она применяется к вашей структуре:
Ящики с одним и тем же уровнем стека в контексте стекирования располагаются задом наперед в соответствии с порядком дерева документов.
Если вы посмотрите на свое HTML-дерево, вы увидите следующее:
В соответствии с контекстом стекирования мы должны быть в состоянии дать вашему элементу на заднем плане более высокий порядок стеков, чем ваш элемент впереди, изменив порядок этих элементовв вашем дереве.
Это всего лишь предположение, но у вас, вероятно, есть что-то вроде массива, в котором вы храните данные, а какой-то JS-файл строит из него турнирную сетку.Если бы вы могли как-то изменить порядок этих двух элементов (например, изменив порядок вашего массива), вы бы не использовали CSS и не использовали бы никакого дополнительного JQuery.
Что если нетиз этих работ?
Ну, тогда я не вижу решения, которое требует только CSS.
Я также думал о возможном решении JS, но это сложное решение, и я не мог найти (простое) решение. Позвольте мне объяснить проблему:
Поскольку ваш select находится за элементом div, JQuery не распознает его (например,) на hover, поэтому вам придется снова использовать псевдоклассы, которые я уже рассмотрел при попытке использовать только CSS.
Я также думал о добавлении z-index из -1 к блокирующему элементу, потому что JQuery мог распознать его при наведении курсора. Но это также приводит к проблемам: блокирующий элемент теперь находится на заднем плане, а заблокированный элемент спереди, и вы также можете щелкнуть по нему. Проблема в том, что (прежний) блокирующий элемент теперь стоит за #bracket-wrapper. Это также недопустимое решение, потому что вам придется снова использовать псевдокласс для нацеливания на этот конкретный элемент.
Заключение
Я буду честен с вами: это турнирное дерево плохо спроектировано и структурировано. Не должно быть перекрывающихся элементов или элементов вне контейнера и, конечно, не оба в комбинации. Если ни одна из моих попыток не подходит, я не вижу решения CSS или JS. По крайней мере, не простой. Вы предоставили мало информации о том, как строится дерево турниров, но если вы это сделаете, все может измениться.
В этом состоянии я думаю, что восстановление всей этой структуры - единственное действительно чистое решение.
Редактировать
@ Deckerz предоставил отличное решение, которое не фокусируется на z-index. Вместо этого он использует pointer-events. Я попробовал этот подход, но потерпел неудачу, потому что я забыл важную часть. Логика этого проста:
Сначала вы отключаете все события щелчка на всем внутри .bracket-part, так как они не нужны. Затем вы добавляете события клика обратно на выбор. Чтобы сделать его более универсальным для более простого использования, вы можете просто изменить select в селекторе CSS на класс .re-enable-events или что-то в этом роде. JS о z-index на самом деле не был нужен.
#bracket-wrapper .bracket-part select {
pointer-events: all !important;
}
#bracket-wrapper .bracket-part {
pointer-events: none;
}
Однако это все еще обходной путь. Я все еще рекомендую реструктурировать ваш код и CSS.