html - 如何使用 CSS 移动带有 PHP 内容的 HTML div

Question

我已经创建了一个基于网络的电子学习模块。用户将使用 Web 浏览器查看和浏览模块。我有两个标记为“后退”和“下一步”的按钮，供用户通过该模块。每个页面上的所有内容都由 PHP 数组控制，以放置用户在页面上看到的文本。我的 HTML/PHP 代码是:

<div id="white">

        <div id="header">
            <img id="header_logo"  src="./images/tfx_logo3.png" /img>
            <div id="mod-title">
                <div id="tab-shape"></div>
                <h1><?php echo $module; ?></h1>
            </div>
            <div id="nav-bar">
                <ul class="tabs">
                    <li><a href="./main_menu.php">Myths</a></li>
                </ul>
            </div>  
        </div>


        <h2><?php echo $heading[$page-1]; ?></h2>

        <div class ="ref">

            <?php echo $ref[$page-1];?>
        </div>

        <div class="nav-btns">
            <?php

                if ($page != 1) {
                    echo '<a id="prev" href="' . $filename . '.php?page=' . ($page-1) . '">Back</a>';
                }

                if (!in_array($page+1, $progress_pages) && $page != $last_page) {           
                    echo '<a id="next" href="' . $filename . '.php?page=' . ($page+1) . '">Next</a>';
                }
                else {
                    echo '<a id="next" href="progress_check.php?page=' . ($page+1) . '">Next</a>';
                }


                ?>

        </div>

我的问题是导航按钮“后退”和下一个出现在内容的顶部，如下所示:

我该如何解决这个问题？这是一个CSS问题吗？ CSS 是

.ref{
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    overflow-y: auto;
    overflow-x: hidden;
    border:  1px, solid #ccc;
    padding: 0px 7px;

}

.nav-btns {
    width: 100%;
    position: absolute;
    top:600px;
}

Answer 1

努力改变

.nav-btns {
    width: 100%;
    position: absolute;
    top:600px;
}

到

.nav-btns {
    width: 100%;
    display: block;
}

让我知道结果!