javascript - 需要使框相对于 header 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

我不知道这是否是您正在寻找的答案，但我会这样做，

添加

<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/