Javascript 如何为我的文本创建静态位置？

我是javascript、HTML和CSS方面的新手。我设法做了一个简单的动画程序。但目前，我需要的是，每次执行一个函数时，在映射的底部显示一个文本。我可以显示is，但它会一直跟随我的动画。你们能在我的节目中帮助我并指导我有什么问题吗

var move=函数（事件）{
如果（event.keyCode===97）{
const appDiv=document.getElementById（“应用”）；
setTimeout（函数（）{
appDiv.classList.add（“robot_end_top”）；
}, 0);
setTimeout（函数（）{
appDiv.classList.add（“robot_end_left”）；
}, 2000);
setTimeout（函数（）{
appDiv.classList.add（“robot_end_table1”）；
}, 4000);
document.getElementById（“TableNumber”）.innerHTML=“表1”；
}
如果（event.keyCode===98）{
const appDiv=document.getElementById（“应用”）；
setTimeout（函数（）{
appDiv.classList.add（“robot_end_top”）；
}, 0);
setTimeout（函数（）{
appDiv.classList.add（“机器人1_end_left”）；
}, 2000);
setTimeout（函数（）{
appDiv.classList.add（“robot_end_table2”）；
}, 4000);
document.getElementById（“TableNumber”）.innerHTML=“表2”；
}
如果（event.keyCode===99）{
const appDiv=document.getElementById（“应用”）；
setTimeout（函数（）{
appDiv.classList.add（“robot_end_top”）；
}, 0);
setTimeout（函数（）{
appDiv.classList.add（“机器人1_end_left”）；
}, 1000);
setTimeout（函数（）{
appDiv.classList.add（“robot_end_table3”）；
}, 2000);
document.getElementById（“TableNumber”）.innerHTML=“表3”；
}
如果（event.keyCode===100）{
const appDiv=document.getElementById（“应用”）；
setTimeout（函数（）{
appDiv.classList.add（“robot_end_top”）；
}, 0);
setTimeout（函数（）{
appDiv.classList.add（“机器人1_end_left”）；
}, 1000);
setTimeout（函数（）{
appDiv.classList.add（“robot_end_table4”）；
}, 2000);
document.getElementById（“TableNumber”）.innerHTML=“表4”；
}
如果（event.keyCode===101）{
const appDiv=document.getElementById（“应用”）；
setTimeout（函数（）{
appDiv.classList.add（“robot_end_top”）；
}, 0);
setTimeout（函数（）{
appDiv.classList.add（“机器人1_end_left”）；
}, 1000);
setTimeout（函数（）{
appDiv.classList.add（“robot_end_table3”）；
}, 2000);
setTimeout（函数（）{
appDiv.classList.add（“robot_end_table 5”）；
}, 3200);
document.getElementById（“TableNumber”）.innerHTML=“表5”；
}
如果（event.keyCode===102）{
const appDiv=document.getElementById（“应用”）；
setTimeout（函数（）{
appDiv.classList.add（“robot_end_top”）；
}, 0);
setTimeout（函数（）{
appDiv.classList.add（“机器人1_end_left”）；
}, 1000);
setTimeout（函数（）{
appDiv.classList.add（“robot_end_table3”）；
}, 2000);
setTimeout（函数（）{
appDiv.classList.add（“robot_end_table6”）；
}, 3200);
document.getElementById（“TableNumber”）.innerHTML=“表6”；
}
如果（event.keyCode===103）{
const appDiv=document.getElementById（“应用”）；
setTimeout（函数（）{
appDiv.classList.add（“robot_end_top”）；
}, 0);
setTimeout（函数（）{
appDiv.classList.add（“机器人1_end_left”）；
}, 1000);
setTimeout（函数（）{
appDiv.classList.add（“robot_end_table3”）；
}, 2000);
setTimeout（函数（）{
appDiv.classList.add（“robot_end_table7”）；
}, 3200);
document.getElementById（“TableNumber”）.innerHTML=“表7”；
}
如果（event.keyCode===104）{
const appDiv=document.getElementById（“应用”）；
setTimeout（函数（）{
appDiv.classList.add（“robot_end_top”）；
}, 0);
setTimeout（函数（）{
appDiv.classList.add（“机器人1_end_left”）；
}, 1000);
setTimeout（函数（）{
appDiv.classList.add（“robot_end_table3”）；
}, 2000);
setTimeout（函数（）{
appDiv.classList.add（“robot_end_table8”）；
}, 3200);
document.getElementById（“TableNumber”）.innerHTML=“表8”；
}
如果（event.keyCode===13）{
const appDiv=document.getElementById（“应用”）；
setTimeout（函数（）{
appDiv.classList.add（“robot3_end_down”）；
}, 2000);
setTimeout（函数（）{
appDiv.classList.add（“机器人3结束右”）；
}, 0)
setTimeout（函数（）{
window.location.reload（true）；
}, 4000);
document.getElementById（“TableNumber”）.innerHTML=“返回”；
}
}

正文{
身高：100%；
宽度：100%；
背景图片：url（“cu2+.jpg”）；
背景重复：无重复；
背景附件：固定；
/*背景位置：中心*/
背景尺寸：980px400px，封面；
}
/*表1*/
.机器人\u启动\u顶部{
顶部：260px；
过渡：前2名；
}
.机器人\启动\左{
位置：固定；
左：550px；
过渡：所有2；
}
.robot_end_左{
左：680px；
}
.robot_end_top{
顶部：200px；
}
.robot_end_top2{
顶部：55px；
}
.robot_end_表1{
顶部：100px；
}
/*表1末尾，表2开头*/
.机器人1_结束_左{
左：640px；
}
.robot_end_表2{
顶部：80px；
}
/*表2结束表3开始*/
.robot_end_表3{
顶部：80px；
左：550px；
}
/*表3结束表4开始*/
.robot_end_表4{
顶部：55px；
左：590px；
}
/*表4结束表5开始*/
.robot_end_表5{
顶部：45px；
左：530px；
}
/*表6结束表7开始*/
.robot_end_表6{
顶部：80px；
左：500px；
}
/*表6结束表7开始*/
.robot_end_表7{
顶部：40px；
左：480px；
}
/*表7结束表8开始*/
.robot_end_表8{
顶部：55px；
左：440px；
}
/*表8结尾*/

事实上，这很简单。您只需将

p

标记放在

div.app

之外。我还添加了CSS来设置它的样式

position:fixed

使元素（我改为div）始终处于静态位置，而不受影响