Question

所以我的页面顶部有一个导航栏，下面有一个div块..

我想要的是让div块的边框通过导航栏上升..

这是一张展示我目前所拥有的图片：

感谢您的帮助，如果有人知道的话！

Answer 1

这是一个概念验证示例。细节因实际设计而异。

从以下HTML开始：

<div class="nav-wrap">
   <ul class="nav">
       <li>Home</li>
       <li>About This</li>
    </ul>
</div>

并使用以下CSS规则：

.nav {
    text-align: center;
    border: 1px dotted lightgray; /* for demo only */
}
.nav li {
    display: inline-block;
    padding: 10px;
    margin: 0 20px;
    background-color: white;
}
.nav-wrap {
    position: relative;
    border-bottom: 1px solid blue;
    height: 20px;
}

想法是在导航周围添加一个包装块（.nav-wrap），然后为其设置底部边框。然后，您可以通过调整包装器的高度来定位边框。

.nav块实际上溢出了包装器，但在这种情况下，它提供了有用的效果。

请参阅 jsFiddle

上的演示

设计注意：包装块并非绝对必要，但通常情况下，您可能需要ul块来设置导航栏的总高度或多个位置级菜单。包装器为您提供了更多设计选项。

Answer 2

您可以将导航设置为具有绝对定位，或者使用z-index。

Answer 3

给div余数赋予负值 - KK

使边框在其他元素下转到页面顶部

3 个答案: