如何在非绝对定位下将innerHTML生成的计时器置于表单下方？

嘿，这个问题很好解决，咱们完全不用依赖绝对定位！核心问题是你现在把承载倒计时的#checking div放在了<head>标签里——这不仅不符合HTML规范（head标签只用来放元数据、脚本、样式这类非可视化内容），还直接导致它默认渲染在页面最顶部。

只需要调整一下DOM结构，把倒计时容器移到表单下方就行，具体操作如下：

• 把<div id="checking"></div>从<head>中移除，放到表单的闭合标签</form>之后、</div>（main容器的闭合标签）之前
• 删除<head>里那个看起来无意义的<script type="text/javascript">(5,"checking");</script>代码

修改后的完整代码如下：

<head>
</head>
<body bgcolor="yellow">
  <div id=main>
    <br><br>
    <form method="POST" id="quizzes" action="">
      <label for="question"><?php echo ($currentQuestion+1).". ". $questionsAndAnwsers[$currentQuestion]["question"]; ?></label>
      <input type="hidden" name="currentQuestion" value="<?php echo $currentQuestion;?>"><br>
      <input type="text" name="guess" value="" placeholder="Answer...">
      <input type="submit" name="btnsubmit" value="Next Question">
    </form>
    <!-- 倒计时容器移到此处，自然处于表单下方 -->
    <div id="checking"></div>
  </div>
  <script type="text/javascript">
    seconds = 15;
    runningtime = setInterval(function () {
      var element = document.getElementById("checking");
      element.innerHTML = "<h2 style='text-align:center'> <b>"+seconds+"</b> seconds</h2>";
      if(seconds < 1){
        clearInterval(runningtime);
        document.getElementById('quizzes').submit();
      }
      seconds--;
    }, 1000)
  </script>
</body>

原理说明 #

HTML采用流式布局，页面元素会严格按照它们在DOM中的先后顺序依次渲染。把#checking div放在表单之后，浏览器会在渲染完表单内容后再渲染这个倒计时容器，这样它就自然出现在表单下方了，完全不需要用绝对定位来强制调整位置。

内容的提问来源于stack exchange，提问作者user9453652