Блоки position:absolute мешают друг другу

Question

На странице есть два блока с 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 нулевые размеры, то визуально ничего не меняется и всё начинает работать как надо, но у меня нет доступа к этому блоку в реальной ситуации...

Answer 1

<style>
.box {
    position:absolute;
    
}
.box div {
    position:relative;
 
    width:50px;
    height:50px;
    
     border:1px solid #000;

    
    
    box-sizing: border-box;
}
</style>
<div class="box" style="transform:translate(150px,150px);z-index:0;">
<div style="background:#0cf;cursor:crosshair;"></div>
</div>
<div class="box" style="transform:translate(100px,100px);z-index:0;"><div style="background:#000;cursor:pointer;"></div></div>

смотрите даже если z-index одинаковый один элемент будет перекрывать другой а так как все дочерние элементы не перестают быть их частью то на них это тоже воздействует. Благодаря тому что у вас у дочернего элемента div.box есть свойство transform:translate(-50%,-50%); он смещается и залазит под другой div.box который лежит сверху и по сути у вас курсор не дочернем элементе а над родительским по этому смена курсора не происходит. попробуйте div.box задать цвет и увидите как у вас элементы располагаются

вот как все выглядит у вас красным цветом обозначены родительские блоки

Answer 2

Проблема решена установкой:

width:0;height:0` элементам класса `.box`

В реальной задаче доступа к этому классу у меня нет, так что использован псевдокласс :has для имитации обращения к родительскому элементу.

Answer 3

.box {
  position: absolute;
  pointer-events: none;
}

.box > * {
  pointer-events: all;
}

.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>

БЛОГ НА HUSL

Блоки position:absolute мешают друг другу

Ответы (3 шт):