На странице есть два блока с position:absolute. Особенность в том, что точкой привязки должен быть центр блока, поэтому используется transform:translate(-50%,-50%); Проблема в том, что хоть блоки в итоге и располагаются где надо, но верхний блок мешает прохождению событий к лежащему под ним блоку, хотя визуально и не заслоняет его.
Проще проиллюстрировать это на картинке. Прозрачный квадрат - фактическое расположение красного блока до применения transform:translate (смотрю через консоль Google Chrome). В той части синего блока, которая перекрыта, не срабатывают никакие события - ни css hover, ни javascript.
Для наглядности этим блокам установлен разный вид курсора при наведении, просто откройте прилагаемый код в браузере и поводите мышкой - левая верхняя четверть синего блока не реагирует на наведение мыши.
.box {
position: absolute;
}
.box div {
position: relative;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border: 1px solid #000;
}
<div class="box" style="transform:translate(150px,150px);z-index:0;"><div style="background:#ccf;cursor:crosshair;"></div></div>
<div class="box" style="transform:translate(100px,100px);z-index:0;"><div style="background:#fcc;cursor:pointer;"></div></div>
Я не могу влиять на блок с классом box, мне доступно только изменение его содержимого - внутренний div и его стили. Менять расположение блоков в коде и их z-index нельзя - они могут быть любыми и это мне неподконтрольно. Нужно просто расположить свой блок внутри предложенных блоков так, точка привязки была в центре. Выглядит сейчас всё как надо, только не работают события на перекрывающейся части.
Похоже, такое поведение не зависит от браузера (пробовал с Chrome, Opera, Edge) и способа позиционирования (вместо translate пробовал отрицательные left top и margin).
Не понимаю, это ожидаемое поведение или баг? Как быть?
P.S. Поэкспериментировал и обнаружил, что если задать блокам класса box нулевые размеры, то визуально ничего не меняется и всё начинает работать как надо, но у меня нет доступа к этому блоку в реальной ситуации...