html - 如何将一个 div 框放在另一个 div 框的正下方？

Question

我的 div 框的定位 (?) 有问题。我的导航栏有一个 div 框。
我想要一个 div 框，就在中心的导航栏下方，可以填充一些文本。
我试过:

    .navigation {
      background-color: black;
      position: fixed;
      width: 1920px;
      left: 0px;
      top: 0px;
    }

    .inhalt {
      position: realative;
      margin: 0px auto;
      width: 600px;
      top: 600px;
      background-color: white;
    }

    <div class="navigation">
      <table>
        <tr>
          <th><img src="logo.jpeg"></th>
          <th></th>
          <th></th>
          <th><a href="index.html">Startseite</a></th>
          <th><a href="beats.html">Beats</a></th>
          <th><a href="preise.html">Preise</a></th>
          <th><a href="kontakt.html">Kontakt</a></th>
        </tr>
      </table>
    </div>

感谢您的回答!!

Answer 1

1- 首先，.inhalt 类位置必须是“相对的”而不是“position:relative的；”正如您在上面所写的那样，“顶级”属性可以工作。

2- 给你的第二个盒子高度，这样你就可以看到它。

3- 当元素被定位时，它们可以与其他元素重叠。你可以通过给你的导航栏“粘性”位置来解决这个问题，或者如果你想使用固定位置，使用“top”属性来解决这个问题。我为此解决方案添加了一个片段。

4- 你可以先给你的导航栏相对位置，然后在滚动时给它一个固定的位置。查看 codepen 上的示例.

.navigation{
    background-color: black;
    position: fixed;
    width: 100%;
    left: 0px;
    top: 0px;
    z-index: 99999;
}
.inhalt{
    position:relative;
    width: 600px;
    height: 500px;
    top: 30px;
    margin: 0px auto;
    background-color: lightblue;
}

<div class="navigation">
    <table>
     <tr>
        <th><img src="logo.jpeg"></th>
        <th></th>
        <th></th>
        <th><a href="index.html">Startseite</a></th>
        <th><a href="beats.html">Beats</a></th>
        <th><a href="preise.html">Preise</a></th>
        <th><a href="kontakt.html">Kontakt</a></th>
     </tr>
    </table>
 </table>
 </div>

 <div class="inhalt"></div>