使一个DIV滚动到另一个DIV HTML和CSS后面

Question

我正在制作一个网站，其中左侧有固定位置菜单栏，顶部有固定位置菜单，右侧有滚动区域，用于页面的主要内容。我遇到的问题是文本滚动到顶部菜单上：

滚动前：

滚动后

这是我当前的代码（home.php）：

        <style>
            #heading{margin-top:50px;}
#left {
    width: 20%;
    height: 100%;
    position: fixed;
        margin-top:50px;
    outline: 1px solid;
    background-color:#D6EBEB
}
#right {
    width: 80%;
    height: auto;
    padding-top:50px;
    position: absolute;
    right: 0;
}       

</style>






                                    <?php
                                        //IncludeHeader 
                                        include_once 'includes/header.php';
                                    ?>
                <div id="right">
                                    <legend><h1 align="center" class="text-info" >Home Page</h1></legend>
                                <h4> 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum porttitor, mollis diam sit amet, elementum enim. Nunc eleifend dui eu augue condimentum sollicitudin. Sed vel tristique lacus. Morbi rutrum dui at pellentesque blandit. Praesent congue, turpis eget luctus posuere, dui mi bibendum sem, vitae hendrerit purus lectus nec lorem. Cras non porttitor nulla. Praesent mollis nec urna ac laoreet. Curabitur at ipsum a ante iaculis fermentum. Sed ut sagittis velit, ac tincidunt purus. Suspendisse auctor mauris nibh, feugiat pretium felis ultrices quis. Sed rutrum finibus bibendum. Mauris sagittis leo at mollis efficitur. Cras eu finibus eros, nec accumsan lorem. Nulla consequat lacus quis massa sagittis egestas. Nam at orci pharetra, commodo nibh eget, venenatis dui. Donec orci tellus, egestas ut leo eget, accumsan hendrerit felis.

Sed ultrices, nisi vel mattis condimentum, nunc dui fringilla felis, at facilisis massa turpis eu lacus. Morbi lectus urna, vehicula in consectetur posuere, egestas sit amet mauris. Donec nisi leo, luctus id tristique non, ultrices quis purus. Cras quis convallis tortor, sit amet laoreet odio. Donec aliquet ipsum eu fringilla accumsan. Integer gravida orci in laoreet tristique. Maecenas scelerisque leo non felis malesuada, quis commodo mauris porttitor. Aliquam ut commodo risus. Integer condimentum ipsum id maximus pretium.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc non aliquam lorem, sit amet mollis tellus. Aenean vulputate quam nibh, vitae congue dolor lacinia ut. Nunc pharetra ligula turpis, vitae congue felis sollicitudin non. Duis ut justo sit amet nulla dictum commodo et non elit. Morbi varius metus massa, nec fermentum sapien blandit a. Curabitur at lectus sapien. Praesent at lectus nec nulla convallis efficitur blandit nec dui. Duis sed est placerat orci fringilla pellentesque commodo et sem. Sed viverra sem eget pretium ultricies. Duis a diam eget sapien tincidunt dignissim nec sed quam. In ultricies tincidunt sapien id blandit. In ut justo non turpis commodo gravida. Phasellus auctor venenatis ante, interdum fermentum lacus venenatis sit amet. Vivamus nisl lorem, posuere a vulputate quis, placerat ut mi. Vestibulum facilisis bibendum nunc, vitae blandit purus.

Sed eget orci lectus. Sed egestas risus nibh, vel semper metus accumsan nec. Cras gravida diam vitae lorem vestibulum viverra. Vivamus mollis condimentum vehicula. Nullam mauris est, laoreet sit amet suscipit ac, interdum a massa. Suspendisse aliquam mollis arcu non malesuada. Quisque tellus erat, lacinia in augue vitae, mattis vulputate dolor. Donec ultricies vel augue non fermentum. Nulla et convallis urna, quis ultrices quam. Sed urna ipsum, porta sed dapibus sed, commodo eu lorem. Proin tempor neque ut nulla varius lacinia et id nunc. Nunc condimentum porta tellus eu suscipit. Ut convallis turpis sed diam gravida, a blandit tortor dictum.

In et aliquet justo. Proin id leo aliquet nibh elementum volutpat tincidunt malesuada est. In vehicula eleifend ante, at tincidunt nisl lobortis quis. Sed gravida scelerisque est egestas consequat. Curabitur fringilla, enim quis ornare laoreet, sapien nulla bibendum lacus, vel malesuada felis dui viverra enim. Praesent varius dictum nulla. Pellentesque eu gravida velit. Vivamus auctor arcu lectus, et placerat dolor molestie id. Aliquam leo lacus, consequat fermentum porta sed, imperdiet a nibh. Aliquam rutrum nunc sit amet lacus auctor, eu sollicitudin erat auctor. Nullam at rhoncus turpis. Aenean venenatis quam ut tellus gravida, vel suscipit tellus auctor.

Nulla facilisi. Aliquam id condimentum sapien, vel laoreet justo. Nullam erat odio, facilisis a velit eget, consequat laoreet velit. Vivamus dictum sit amet nibh finibus pharetra. Aliquam et nibh vitae massa scelerisque dapibus. Etiam ultrices, tellus eget dapibus scelerisque, augue dolor faucibus quam, sed gravida nunc eros ac dolor. Donec eu metus nec mauris lobortis condimentum sed ac libero. Nullam sit amet nulla euismod, pharetra libero nec, molestie sapien. Mauris gravida placerat est, vitae imperdiet orci lobortis in. Nulla vitae vehicula sem. Vestibulum nec sagittis mauris.

Nulla pharetra ligula nec arcu porta, vel elementum tortor malesuada. Vestibulum metus urna, egestas a viverra eu, convallis at ex. Donec elit elit, maximus ut odio at, tempus interdum erat. In pharetra commodo mi id vestibulum. Sed tristique dui ut elit lacinia feugiat. Quisque vitae ante rutrum ante luctus scelerisque. In hac habitasse platea dictumst. Quisque metus magna, lacinia a orci et, volutpat mattis nisi. </h4>
                                    <br/>
                                    </div>

这是 header.php 代码：

    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
    <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">

<?php /* Check for set Name */ if (!$fname) { $fname = 'Please Sign In'; } ?>

<Style>

    #nav{ background-color: #222; position: fixed; width: 100%; top: 0; }

    #nav ul{ list-style-type: none; padding: 0; margin: 0; text-align="right";}

    #nav ul li{ display: inline-block; }

    #nav ul li:hover{ background-color: #333; }

    #nav ul li a,visited{ color: #CCC; display: block; padding: 15px; text-decoration: none; }

    #nav-wrapper
    {
        width:100%;
        margin: 0 auto;
        padding-right:10px;
    }

</Style>

<div id="nav">

    <div id="nav-wrapper">

          <ul>
            <li style="color: white;    text-align:left;"><a href="home.php">Home</a></li>
            <li style="color: white; text-align:right;margin-left:85%;"><a href="#"><?php echo $fname;?></a></li>     
          </ul>

      </div>

</div>

感谢您提供任何帮助或建议，了解为何会发生这种情况以及如何解决这个问题！

Answer 1

您已将右列应用为绝对位置，但它应该是静态的。

尝试删除position:absolute并添加如belw

#right {
    width: 80%;
    height: auto;
    padding-top:50px;
    float:right;
}