Как функция возвращает bottom координаты элемента относительно документа?

Question

[kirillleogky]

Функция createMessageUnder(elem, html) ниже показывает сообщение под элементом elem.

// получаем координаты элемента в контексте документа
function getCoords(elem) {
    let box = elem.getBoundingClientRect();

    return {
        top: box.top + pageYOffset,
        left: box.left + pageXOffset
    };
}


let elem = document.getElementById("coords-show-mark");

function createMessageUnder(elem, html) {
    // создаём элемент, который будет содержать сообщение
    let message = document.createElement('div');
    // для стилей лучше было бы использовать css-класс здесь
    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;
}

// Использование:
// добавим сообщение на страницу на 5 секунд
let message = createMessageUnder(elem, 'Hello, world!');
document.body.append(message);
setTimeout(() => message.remove(), 5000);

Откуда в этом моменте получено значение coords.bottom , если возвращается только coords.left и coords.top ?

message.style.left = coords.left + "px";
message.style.top = coords.bottom + "px";

Может опечатка? Или всё правильно так как он получает bottom значение?

Comments

[Виталий Першин]

С чего вы взяли что оно получено? Залейте в песочницу пример, чтобы можно было это наглядно проверить, а так похоже что кто-то просто добавил bottom не понимая что его нет

[kirillleogky]

Виталий, Он работает

[kirillleogky]

Виталий,
вот пример

[Виталий Першин]

kirillleogky, Это не пример, это скриншот. Разверните полноценный пример

[Виталий Першин]

kirillleogky, Ваш код не работает, то что он апендится в левый верхний угол это естественное поведение. Да, он принимает координату X, но не принимает координату Y https://codepen.io/L2Banners/pen/zYONgRO

Замените bottom на top и если хотите чтобы сообщение появлялось снизу блока, то добавьте высоту этого блока