0

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

3 ответа 3

0

<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 задать цвет и увидите как у вас элементы располагаются

введите сюда описание изображения

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

4
  • Не понял Ваш ответ и что Вы хотели продемонстрировать... Обратите внимание, что на проблемном участке курсор вообще не меняет вид, получается он не принадлежит ни одному из блоков - ни нижнему, ни верхнему. Поэтому нельзя сказать, что верхний блок что-то перекрыл и события не проходят сквозь него - он сам тоже событие не получает.
    – Kverty
    Commented 18 февр. в 10:32
  • у вас курсор задан для дочерних элементов, а по сути курсор мыши находится на родительском элементе и по этому он не меняется. убрав transform:translate(-50%,-50%); дети перестали выходить за пределы родителей и все стало работать Commented 18 февр. в 10:38
  • Я понимаю, что всё так выглядит. Смещение обязательно, его нельзя убирать - оно нужно, чтобы центр внутреннего блока был в левом верхнем углу внешнего.
    – Kverty
    Commented 18 февр. в 10:51
  • единственное что можно сделать это увеличить z-index у div.box который в нижнем правом углу Commented 18 февр. в 11:00
0

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

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

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

0

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.