【发布时间】：2016-05-27 17:54:28
【问题描述】：
我有一个 DIV，里面有一个 H2。 DIV 与所有其他工作完全分开，位于 HTML 的底部，但由于某种原因，它粘在页面顶部，位于其他 DIV 中。我试过谷歌搜索但无济于事，我需要它在后台开始处理新部分。我应该看什么？
https://jsfiddle.net/5vLvm3xx/
ps。我不知道有多少人浏览这些论坛，但我今天在这里问了很多问题，因为我一直遇到这些阻止我继续的小问题（我是初学者）。我希望它没有麻烦。 :)
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>onepageskiw</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js.js"></script>
</head>
<body>
<div>
<nav>
<ul id="menu">
<li><a href="#">Top</a></li>
<li><a href="#">Om Eventet</a></li>
<li><a href="#">Lokation</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</div>
<div id="logodiv">
<img src="../design/logotop.png">
</div>
<div id="overskrift">
<h1>EVENTET STARTER OM</h1>
</div>
<div id="countdowner">
<table id="table">
<tr>
<div id="countdown">
<td id="id1"></td>
<td id="id2"></td>
<td id="id3"></td>
<td id="id4"></td>
</div>
<tr>
<tr>
<td class="timeLabel">DAGE</td>
<td class="timeLabel">TIMER</td>
<td class="timeLabel">MIN</td>
<td class="timeLabel">SEK</td>
</tr>
</tr>
</tr>
</table>
</div>
<script>
CountDownTimer('06/25/2016 10:00 AM', 'id');
function CountDownTimer(dt, id)
{
var end = new Date(dt);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById(id).innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById(id+"1").innerHTML = days;
document.getElementById(id+"2").innerHTML = hours;
document.getElementById(id+"3").innerHTML = minutes;
document.getElementById(id+"4").innerHTML = seconds;
}
timer = setInterval(showRemaining, 1000);
}
</script>
<div id="information">
<h2>Help me. I'm stuck.</h2>
</div>
</body>
</html>
CSS
@charset "utf-8";
@import url(https://fonts.googleapis.com/css? family=Montserrat:400|Raleway:100,400|);
body {
margin:0;
}
html {
background:url(http://www.freelargeimages.com/wp- content/uploads/2014/12/Black_background.jpg) no-repeat center center fixed;
background-size: cover;
background-repeat: no-repeat;
/*background-position: top center;*/
}
#logodiv {
position:relative;
text-align:center;
}
#logodiv>img {
width:15%;
}
h1 {
font-family:raleway;
font-weight:100;
position:absolute;
width:100%;
text-align:center;
color:white;
letter-spacing:11px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-230%);
font-size:2.5em;
white-space: nowrap;
}
#countdowner {
font-family:sans-serif;
color:white;
position:absolute;
margin:0;
padding:0;
width:100%;
font-size:2em;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-20%);
}
#id1 {
font-size:2.5em;
}
#id2 {
font-size:2.5em;
}
#id3 {
font-size:2.5em;
}
#id4 {
font-size:2.5em;
}
.timeLabel {
font-size:0.7em;
color:#f1a01e;
font-family:montserrat;
font-weight:700;
}
#table {
margin:0 auto;
text-align:center;
}
#table td{
padding:0px 45px;
}
#menu {
position:absolute;
padding:0;
width:100%;
bottom:0;
text-align:center;
}
#menu>li {
font-size:20px;
list-style:none;
display:inline-block;
text-transform:uppercase;
letter-spacing:3px;
font-family:raleway;
font-weight:400;
}
#menu>li>a {
padding:0 15px;
text-decoration:none;
color:white;
}
#menu>li>a:hover {
color:#f1a01e;
}
#information {
position:relative;
clear:both;
color:red;
}
【问题讨论】：
-
那是因为所有其他元素都是绝对放置的......这使得它们在身体上方“流动”。
-
但是我必须这样做才能使它们在居中和放置方面正常工作，除非我以错误/复杂的方式完成了它？就像我写的那样，我仍然是初学者。我尝试将一些更改为相对，但随后元素开始在页面上跳跃。