html - 如何阻止 div 压低其他 div？

Question

我有一些 div。

我正在使用 Grid 系统，但我一辈子都想不出如何阻止 div 将其他人压低。

当我尝试将 margin top 设置为 border div 的 50px 时，它会将其他所有内容向下推。

由于是响应式网格系统，我不想使用绝对位置。

body {
    font-size: 100%;
    font-family: Lato;
}
img {
    width: 100%;
    height: auto;
    max-height: 640px;
}
h2 {
    font-size: 3.2em;
    font-weight: 300;
    text-align: center;
    margin-top: 160px;
}
ul {
    text-align: center;
    margin-top: 100px;
    overflow: hidden;
    margin-right: 25px;
}
ul > li {
    display: inline-block;
    padding: 0 25px;
    font-size: 1.1rem;
}
#circle {
    font-size: 1.2rem;
    border: 1px solid black;
    border-radius: 5px 20px 5px;
    padding: 0 20px;
}
.border {
    overflow: hidden;
    border: 2px solid black;
    margin-top:;
}

<div class="cover">
  <div class="grid">
  </div>
  <div class="row">
    <div class="c12">
      <div class="border"></div>
      <div class="clear"></div>
      <ul>
        <li id="circle">H</li>
        <li>Home</li>
        <li id="circle">A</li>
        <li>About</li>
        <li id="circle">W</li>
        <li>Work</li>
        <li id="circle">C</li>
        <li>Contact</li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="c12">
      <h2>Exquisite Web Development</h2>
    </div>
  </div>
</div>
</div>

Answer 1

在边框 div 上，您可以移除边距并添加:

position: relative;
top: 50px;