Здравствуйте. Есть 2 div, первый 100 на 100 пикселей, второй 50 на 50 пикселей. Как узнать перекрывает ли второй див, первый див? И если перекрывает то на сколько, например если он только на половину перекрывает, то как узнать эту половину? На обычном javascript без jQuery.
@pr0n1x, сколько вариантов перекрытия у вас возможны? Перекрывает снизу, перекрывает сверху, слева, справа или может даже каким-нибудь углом цепляет?
Короче, пока вы в раздумьях, давайте так - я вам даю наводку и возможно, что этого вам хватит. Есть такой метод, как getBoundingClientRect() . Он вернет вам всё, что необходимо для расчетов. Смотрите пример с открытой консолью. Спойлер: HTML+CSS HTML: <div id="one"></div> <div id="two"></div> Код (CSS): div { position: absolute; } #one { width: 100px; height: 100px; outline: 1px solid #060; } #two { top: 80px; left: 25px; width: 50px; height: 50px; outline: 1px solid #900; } Код (Javascript): const rect1 = one.getBoundingClientRect(); const rect2 = two.getBoundingClientRect(); console.table(rect1); console.table(rect2); Метод возвращает объект со следующими значениями: 1. x и y - координаты верхнего левого угла элемента 2. width и height - размеры элемента 3. top и bottom - расстояние в px от верхней границы экрана 4. left и right - расстояние в px от левой границы экрана Что еще нужно для полного счастья? Всё есть, дальше математика.
Спасибо, то что нужно, а вообще пересечение только по ширине, второй див находится ровно по центру первого и может его пересекать или справа или слева.