我正在做一个程序，每次用户进入页面时，会出现“Hello”消息2秒钟。
问题是，每次显示消息时，它都会显示在白色背景上的页面上方，并以这种方式通过向下拖动来改变页面。我知道问题出在'div'中，但我不能让它以任何其他方式工作，以便显示消息。
<div id="welcomeMessage"></div>
我希望在“div2”之上显示消息而不改变它。这可能吗？我无法解决它，有人可以帮助我吗？
这是我的代码片段：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script>
function customAlert(msg, duration) {
var styler = document.getElementById("welcomeMessage")
styler.setAttribute("style", "font-family: Arial, Helvetica, sans-serif;border: solid 3px #4d4d4d;color:white;width:200px;margin: auto;height:auto;top:50%;text-align: center;background: rgba(0, 0, 255,0.6); -webkit-border-radius: 19px; -moz-border-radius: 19px;border-radius: 19px;");
styler.innerHTML = "<h1>" + msg + "</h1>";
setTimeout(function() {
styler.parentNode.removeChild(styler);
}, duration);
document.body.appendChild(styler);
}
</script>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
background: white;
/*background colour*/
}
#div2 {
/* Style the header */
background-color: #f1f1f1;
/*#f1f1f1*/
/*light gray*/
padding: 20px;
text-align: center;
}
/*Navigation bar*/
ul {
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;
/*f1f1f1/*#333*/
}
li {
float: left;
}
li a {
display: block;
color: #333333;
/*333333*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: white;
/*#f9f9f9*/
/*Background colour when mouse on top*/
}
li a.active {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div id="welcomeMessage"></div>
<script>
customAlert("Hello!", 2000)
</script>
<div id="div2">
<h1>Project</h1>
</div>
<div class="tab" id="navbar">
<ul>
<li><a class="active">Tab 1</a></li>
<li><a target="_blank">Tab </a></li>
<li><a target="_blank">Tab 3</a></li>
</ul>
</div>
</body>
</html>使用下面的CSS修复页面顶部的警报：
#welcomeMessage{position:fixed; padding:20px; text-align:center; left:0; top:0; width:100%;}