minor

2-ui/1-document/11-coordinates/article.md

@@ -220,6 +220,28 @@ function getCoords(elem) {
 }
 ```
 
+If in the example above we use it with `position:absolute`, that would work right.
+
+The modified `createMessageUnder` function:
+
+```js
+function createMessageUnder(elem, html) {
+  let message = document.createElement('div');
+  message.style.cssText = "*!*position:absolute*/!*; color: red";
+
+  let coords = *!*getCoords(elem);*/!*
+
+  message.style.left = coords.left + "px";
+  message.style.top = coords.bottom + "px";
+
+  message.innerHTML = html;
+
+  return message;
+}
+```
+
+You'll find other examples in the task.
+
 ## Summary
 
 Any point on the page has coordinates:

2-ui/1-document/11-coordinates/head.html

@@ -1,30 +1,30 @@
 <script>
 document.addEventListener('DOMContentLoaded', function() {
 
-let elem = document.getElementById('coords-show-mark');
+  let elem = document.getElementById('coords-show-mark');
 
-// no elem in ebook mode
-if (elem) {
-  elem.onclick = function() {
+  // no elem in ebook (pdf/epub) mode
+  if (elem) {
+    elem.onclick = function() {
 
-    function createMessageUnder(elem, text) {
-      let coords = elem.getBoundingClientRect();
-      let message = document.createElement('div');
-      message.style.cssText = "position:fixed; color: red";
+      function createMessageUnder(elem, text) {
+        let coords = elem.getBoundingClientRect();
+        let message = document.createElement('div');
+        message.style.cssText = "position:fixed; color: red";
 
-      message.style.left = coords.left + "px";
-      message.style.top = coords.bottom + "px";
+        message.style.left = coords.left + "px";
+        message.style.top = coords.bottom + "px";
 
-      message.innerHTML = text;
+        message.innerHTML = text;
 
-      return message;
+        return message;
+      }
+
+      let message = createMessageUnder(elem, 'Hello, world!');
+      document.body.append(message);
+      setTimeout(() => message.remove(), 5000);
     }
-
-    let message = createMessageUnder(elem, 'Hello, world!');
-    document.body.append(message);
-    setTimeout(() => message.remove(), 5000);
   }
-}
 
 });