Пример. На странице разместим div (id="area") ,  следом за ним div (id="coord") . При перемещении курсора мыши по элементу area в элементе coord будем  выводить координаты курсора. А при клике на область будем отображать элементы div класса item случайного размера.

Шаг 1. При перемещении курсора по элементу area выведем его координаты соседний справа элемент (то есть в coord).

CSS-код:

#area {
   width: 50%;
   height: 50%;
   border: solid grey thin;
   margin: auto;
}
HTML-код:

<body>
  <div id="area" onmousemove="printXY(this)">
  </div>
  <div id="coord">
  </div>
  <script src="program.js"></script>
</body>
JavaScript-код:

function printXY(element) {
    element.nextElementSibling.innerHTML =
         `курсор: (${event.clientX}, ${event.clientY})`;
}
Результат
Шаг 2. Координаты выводятся не под элементом area. Свяжем расположение элемента coord с расположением элемента area. Для этого установим для coord fixed позиционирование и при загрузке страницы установим координаты его вывода по координатам соседнего слева элемента:

CSS-код:

#coord {
    position: fixed;
}
 HTML-код:

<body onload="setElementId('coord')">
  <div id="area" onmousemove="printXY(this)">
  </div>
  <div id="coord"></div>
  <script src="program.js"></script>
</body>
JavaScript-код:

function setElementId(idElement) {
	let element = document.getElementById(idElement);

	let prElement = element.previousElementSibling;

	let coord = prElement.getBoundingClientRect();
	element.style.top = coord.bottom;
	element.style.left = coord.left;
}
Результат
Шаг 3. При переносе курсора на другие элементы страницы - в элементе coord остаются последние значения координат курсора, когда он был над элементом area. Чтобы эти значения не выводились - очистим значения в элементе coord по событию onmouseout:

HTML-код:

<body onload="setElementId('coord')" >
  <div id="area" onmousemove="printXY(this)" 
                 onmouseout="printNull(this)">
  </div>
  <div id="coord"></div>
  <script src="program.js"></script>
</body>
JavaScript-код:

function printNull(element) {
    element.nextElementSibling.innerHTML = ''; 
}
Результат
Шаг 4. При клике курсора мыши на наш area создадим новый div класса item (с позиционированием fixed), а в качестве координат верхнего левого узла нового элемента установим координаты мыши. Ширину и высоту нового блока сгенерируем случайным образом.

CSS-код:

.item {
    position: fixed;
    background: lightGreen;
}
HTML-код:

<body onload="setElementId('coord')" >
  <div id="area" onmousemove="printXY(this)" 
                 onmouseout="printNull(this)"
                 onclick="createItem(this)">
  </div>
  <div id="coord"></div>
  <script src="program.js"></script>
</body>
JavaScript-код:

// генерируем случайное целое число в интервале от а до b
let size = (a, b) => Math.round(a + Math.random() * (b - a);
}

function createItem(element) {
    let item = document.createElement('div');
    item.classList.add('item');

    let size = getSize(10, 30);
    item.style.width = item.style.height = size;

    item.style.left = event.clientX;
    item.style.top = event.clientY;

    element.appendChild(item);
}
Результат
Задание
В примере шага, если кликнуть мышкой в районе границ - то новые элементы будут "выходить" за границу элемента area или располагаться на его границе. В этом случае необходимо "прижать" элемент к границе с внутренней стороны:



Для этого необходимо создать функцию, которая пересчитывает положение нового элемента getLeftTop(), если это нужно:

function createItem(element) {
    let item = document.createElement('div');
    item.classList.add('item');

    let size = getSize(10, 30);
    item.style.width = item.style.height = size;

    let rect = element.getBoundingClientRect();

    let coordItem = getLeftTop(event.clientX, event.clientY, rect, size);

    item.style.left = coordItem[0];
    item.style.top = coordItem[1];

    element.appendChild(item);
}
Функция getLeftTop() в качестве параметров получает:

координату x курсора;
координату y курсора;
координаты углов области area (rect.left, rect.top, rect.right, rect.bottom);
ширину и высоту нового элемента (size).
Результат работы функции - массив из двух элементов: координаты верхнего левого угла нового элемента (сначала координата left,  затем top).

Sample Input:

200 150
180 5 450 200
20
Sample Output:

[ 200, 150 ]

Код функции getLeftTop() на данный момент выглядит так:
function getLeftTop(eventX, eventY, rect, size) {
    if (eventX < rect.left) {
        eventX = rect.left;
    }
    if (eventX + size > rect.right) {
        eventX = rect.right - size;
    }
    if (eventY < rect.top) {
        eventY = rect.top;
    }
    if (eventY + size > rect.bottom) {
        eventY = rect.bottom - size;
    }
    return [eventX, eventY];
}