Почему мое контекстное меню добавляет пустое место вверху страницы?

Question

Я пытаюсь создать контекстное меню для моего веб-приложения HTML.Когда он скрыт, в верхней части страницы нет пустого пространства, но когда я его активирую, по какой-то причине вверху есть место.

Контекстное меню отключено:

Включено контекстное меню:

Вот код:

<style>
    #contexmenu{
        display: none;
        position: relative;
        width: 100px;
        background: rgb(238, 238, 238);}
        #contexmenu section{
            padding: 5px;}
        #contexmenu section:hover{
            background-color: rgb(219, 219, 219)}
    #mainarea{
        width: 100vw;
        height: calc(100vh - 50px);
        background: red;
    }
</style>

<article id="contexmenu">
    <section onclick="addJob()">Add Job</section>
    <section>Edit Job</section>
    <section>Refresh</section>
</article>

<article id="mainarea">

</article>

<script>

function addJob(){
    alert("");
}

document.addEventListener("contextmenu", function(event){
    event.preventDefault();
    var contexmenu = document.getElementById("contexmenu")
    contexmenu.style.display = "block";
    contexmenu.style.top = `${event.screenY - 50 - contexmenu.clientHeight}px`;
    contexmenu.style.left = `${event.screenX - 65}px`;
    console.log("New event");
})

document.addEventListener("click", function(event){
    document.getElementById("contexmenu").style.display = "none";
})
</script>

Что является причиной проблемы и каковы действияМне нужно принять решение проблемы?

Answer 1

Вот мое решение

Я добавил position:fixed; к #contexmenu

Запустите следующий фрагмент в полноэкранном режиме

function addJob() {
  alert("");
}

document.addEventListener("contextmenu", function(event) {
  event.preventDefault();
  var contexmenu = document.getElementById("contexmenu")
  contexmenu.style.display = "block";
  contexmenu.style.top = `${event.screenY - 50 - contexmenu.clientHeight}px`;
  contexmenu.style.left = `${event.screenX - 65}px`;
  console.log("New event");
})

document.addEventListener("click", function(event) {
  document.getElementById("contexmenu").style.display = "none";
})

#contexmenu {
  display: none;
  position: relative;
  width: 100px;
  background: rgb(238, 238, 238);
  position: fixed;
}

#contexmenu section {
  padding: 5px;
}

#contexmenu section:hover {
  background-color: rgb(219, 219, 219)
}

#mainarea {
  width: 100vw;
  height: calc(100vh - 50px);
  background: red;
}

<article id="contexmenu">
  <section onclick="addJob()">Add Job</section>
  <section>Edit Job</section>
  <section>Refresh</section>
</article>

<article id="mainarea">

</article>