需要相對於標題HTML CSS制作框？

Question

我有一個標題，我需要一個小菜單框，我正在努力確保我不需要在CSS中使用top ，我可以在HTML中添加換行符。 我有以下代碼的標題， global_tools_menu是我想要添加的菜單。 出於某種原因，它從頁面頂部開始？ 我如何從頭部下方開始？ 這是代碼

HTML：

<div class="global_header">
    <b><p>ex</p></b>
    <header>
        <ul class="nav-bar">
            <li class="nav-item global_tools" onclick="tools()"><a><img src="/ex/assets/tools.png" width="20px"/></a></li>
            <?php
            if(isset($_SESSION['id'])) {
                echo '<li class="nav-item right-3826" onclick="redirect(`myaccount`);"><a>My Account</a></li>';
                echo '<li class="nav-item right-3826" onclick="redirect(`scripts/logout.php`);"><a>Logout</a></li>';
            }
            if(!isset($_SESSION['id'])) {
                echo '<li class="nav-item right-3826" onclick="redirect(`login`);"><a>Log in</a></li>';
                echo '<li class="nav-item right-3826" onclick="redirect(`signup`)";><a>Sign Up</a></li>';
            }
            ?>
            <li class="nav-item" onclick="redirect('');"><a>Home</a></li>
            <li class="nav-item" onclick="redirect('all');"><a>All</a></li>
            <li class="nav-item" onclick="redirect('search');"><a>Search</a></li>
        </ul>
    </header>
</div><br>
<div id="global_tools_menu">
    <div id="global_tools_true">

    </div>
    <div id="global_tools_false">

    </div>
</div>

CSS：

.tools {
    background-image: url('assets/tools.png');
}
a {
    color: #009AFF;
    text-decoration: none;
}
body {
    font-family: 'PT-Sans', sans-serif;
}
.nav-bar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #009AFF;
    height: 30px;
    border: 1px solid;
}
.nav-item {
    display: block;
    color: #fff;
    text-align: center;
    padding: 6px 8px;
    width: calc(2px + 13%);
    text-decoration: none;
    float: left;
    border-right: 1px solid #000;
    cursor: pointer;
    background-color: #0050FF;
}
.nav-item a {
    color: white;
}
.nav-item:hover {
    background-color: #0039B5;
}
.right-3826 {
    float: right;
    border-right: 0px solid;
    border-left: 1px solid #000;
}
input:focus {
    outline: none;
}
.global_header p {
    position: relative;
    font-size: 70px;
    cursor: pointer;
    text-align: center;
    margin-bottom: 20px;
    vertical-align: middle;
    top: -20px;
    color: white;
}
.global_header {
    background-color: #009AFF;
    word-wrap: break-word;
    position: absolute;
    top: 0px;
    width: 100%;
    left: 0;
}
.global_tools {
    background-color: white; 
}
.global_tools:hover {
    background-color: #EAEAEA; 
}
#global_tools_menu {
    position: relative;
    width: 400px;
    height: 700px;
    background-color: #080808;

這是一個JSFiddle。 我需要從標題下方開始制作黑盒子嗎？ https://jsfiddle.net/qypm88dm/

Answer 1

將global_tools_menu的位置設置為inline而不是absolute或relative因為它們引用了頁面的左上角，這就是它在頂部的位置。 如果將其設置為內聯，它將在標題下方彈出。

編輯：我的錯誤，它將把它設置在它背后，但如果你這樣做，然后給它margin-top: 200px將得到它低於它。 但這可能不是您想要的確切修復。

Answer 2

我不知道這是你正在尋找的答案，但我會這樣做，

加

<div class="blank"></div>

略低於

<div class="global_header">
...
</div>

所以它會

<div class="global_header">
...
</div>
<div class="blank"></div>

和css會

.blank {
    height: 190px;
    width: 100%;
}

https://jsfiddle.net/qypm88dm/2/