保持div固定在导航栏上方

Question

我正在尝试navtop（深灰色框），目前位于navbar下方，位于navbar上方该部分的页面顶部，请参见下图。我不擅长定位元素。

navbar处于固定位置以及div navtop 我试图这样做，以便当您向下滚动页面时，主要内容将位于navbar和navtop下方。

HTML：

<div class="navtop"></div>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">CrystalDev</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="http://www.crystaldev.net/">Home</a></li>
            <li><a href="/products.php">Products</a></li>
            <li><a href="/about-us.php">About Us</a></li>
            <li><a href="/contact.php">Contact</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <?php
            if($_SESSION["active"]==false){
                ?>
                <li class="active"><a href="/signup.php"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                <li><a href="/login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                <?php
            }else{
                switch($_SESSION["rank"]){
                    case 10:
                        ?>
                        <li><a href="/admin.php"><span class="glyphicon glyphicon-log-in"></span> Admin Panel</a>
                        <?php
                        break;
                    case 1:
                        ?>
                        <li><a href="/signout.php"><span class="glyphicon glyphicon-log-out"></span> Sign Out</a>
                        <?php
                        break;
                    default:
                        break;
                }
            }
            ?>
        </ul>
    </div>
</nav>

CSS：

.navtop {
    height: 10%;
    width: 100%;
    background-color: grey;
}

.navbar {
    margin-top: 10%;
    z-index: 1;
}

Answer 1

问题可能不是导航栏下的灰色div。尝试增加页面上内容的上边距或填充。

Answer 2

您必须从导航栏中删除navbar-top-fixed类并添加逻辑以将它们放在顶部（否则您必须使您的选择器特异性高于引导程序用于{{{ 1}}对于要应用的任何更改。

navbar-top-fixed

.navtop {
  height: 8vh;
  width: 100%;
  background-color: gray;
  position: fixed;
  top: 0;
  left: 0;
}

.navbar {
  position: fixed;
  top: 8vh; /*same as the height of navtop*/
  width: 100%;
}

Answer 3

只需要添加 top：0和position：fixed ans添加一些随机文本以显示该位置保持固定为navtop。

#include <iostream>
using namespace std;
int main()

{
    string sub, tf;
    int m1, m2, m3, m4, sum, TEZA;
    double avg, tzm;

    cout << "SIMPLE AVERAGE CALCULATOR";
    cout << "\n" << "\n" << "Subject at hand?: ";
    cin >> sub;
    cout << "\n" << "Input the FOUR marks you'd like verified: " << "\n";
    cout << "\n" << "M1: ";
    cin >> m1;
    cout << "\n" << "M2: ";
    cin >> m2;
    cout << "\n" << "M3: ";
    cin >> m3;
    cout << "\n" << "M4: ";
    cin >> m4;
    cout << "\n" << "Would you like to include the TEZA grade?(Y/N): ";
    cin >> tf;

    sum = m1 + m2 + m3 + m4;
    avg = (double) sum / 4;

    if (tf == "Y" | tf == "y")
    {
        cout << "What is the TEZA grade?: ";
        cin >> TEZA;
        int tzm = ((double) avg * 3 + TEZA) / 4;
        cout << "\n" << "Your average grade at " << sub << " is " << tzm << "\n"
             << "\n";

        cout << "You got the following mark: ";
        if (tzm >= 9 && tzm <= 10)
            cout << "A" << "\n";
        else if (tzm >= 8 && tzm <= 9)
            cout << "B" << "\n";
        else if (tzm >= 7 && tzm <= 8)
            cout << "C" << "\n";
        else if (tzm >= 6 && tzm <= 7)
            cout << "D" << "\n";
        else if (tzm >= 5 && tzm <= 6)
            cout << "E" << "\n";
        else if (tzm < 5)
            cout << "F" << "\n";

        if (tzm >= 5)
        {
            cout << "DO YOU PASS: " << "\n";
            cout << "Yes." << "\n";
        }
        else
            cout << "No." << "\n";
    }

    else

    {
        cout << "\n" << "Average at " << sub << " is " << avg << "\n" << "\n";

        cout << "You got the following mark: ";
        if (avg >= 9 && avg <= 10)
            cout << "A" << "\n";
        else if (avg >= 8 && avg <= 9)
            cout << "B" << "\n";
        else if (avg >= 7 && avg <= 8)
            cout << "C" << "\n";
        else if (avg >= 6 && avg <= 7)
            cout << "D" << "\n";
        else if (avg >= 5 && avg <= 6)
            cout << "E" << "\n";
        else if (avg < 5)
            cout << "F" << "\n";

        cout << "\n" << "DO YOU PASS?: " << "\n";

        if (avg >= 5)
            cout << "Yes." << "\n";
        else
            cout << "No." << "\n";

    }
}

.navtop {
    height: 10%;
    width: 100%;
    border:2px solid red;
    background-color: tan;
    position:fixed;
    top:0px;
}

.navbar {
    margin-top: 10%;
    z-index: 1;
}