Question

我有一个内有H2的DIV。 DIV与所有其他工作完全分开，放在HTML的底部，但由于某种原因，它在一个其他DIV中坚持页面顶部。我试过谷歌搜索，但没有用，我需要它在背景下开始新的部分工作。我应该看什么？

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;
}

Answer 1

这是因为您的所有其他元素都在使用position: absolute;

Answer 2

您可以使用flex属性，高度顺序并重新排列结构（1包装和类）：https://jsfiddle.net/5vLvm3xx/2/

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);
}

@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Montserrat:400|Raleway:100,400|);
 body {
  margin: 0;
}
html {
 
  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;
  width: 100%;
  text-align: center;
  color: white;
  letter-spacing: 11px;
  font-size: 2.5em;
  white-space: nowrap;
}
#countdowner {
  font-family: sans-serif;
  color: white;
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 2em;
}
#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 {
  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;
}
html,
body,
.splash {
  height: 100%;
}
.splash {
  display: flex;
  flex-flow: column;
  min-height:450px; background: url(http://www.freelargeimages.com/wp-content/uploads/2014/12/Black_background.jpg) no-repeat center center fixed;
  background-size: cover;
}
.splash>* {
  order: -1;
  flex: 1;
}
.splash:before {
  content: '';
  display: block;
  order: 0;
  flex: 1;
}
.menu {
  order: 1;
  flex: none;
  margin-top: auto;
  margin-bottom: 0;
}

<div class="splash">


  <div class="menu">
    <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>
    </table>
  </div>

</div>

<div id="information">
  <h2>Help me. I'm stuck.</h2>
</div>

Div被困在另一个div里面

2 个答案: