背景图像引导程序 4.0 顶部的导航栏

Question

我正在尝试让我的导航栏位于引导 4.0 中的背景图像之上。我可以通过背景图像上的负边距顶部来做到这一点，但是如果我对我的网站进行更改，这并不容易使用。

.HTML：

<div class="masthead">
<nav>
<img src="https://test.io/wp-content/uploads/2019/02/testIO-logo-rgb-2.png" class="site-logo" />
</nav>
</div>
<div class="container-fluid hero"> </div>

.CSS：

.hero {
height: 600px;
background-image: url(https://s17736.pcdn.co/wp-content/uploads/2019/03/asoggetti-318284-unsplash-1024x684.jpg);
background-position: center center;
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
margin-bottom: 15px;
}
nav {
background: transparent;
background-attachment: fixed;
background-position: auto,center;
}
.site-logo {
height: 64px;
}

JSFiddle

Answer 1

使用display:relative;来父级div 和display:absolute;，top:0;来父级div 和 来父级(nav(。

每当您需要将徽标(这是常见的用例(放在顶部而不使用负值然后使用，parent和child的位置，如果没有父项，则该body将被视为父项，它将绝对定位于正文。

您不必使用负值，因为绝对值将按预期适合所有实例的图像。

摆弄玩弄。

.hero {
height: 600px;
background-image: url(https://s17736.pcdn.co/wp-content/uploads/2019/03/asoggetti-318284-unsplash-1024x684.jpg);
background-position: center center;
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
margin-bottom: 15px;
}
.masthead {
display: relative;
}
nav {
background: transparent;
background-attachment: fixed;
background-position: auto, center;
position: absolute;
top: 0;
}
.site-logo {
height: 64px;
}

<div class="masthead">
<nav>
<img src="https://test.io/wp-content/uploads/2019/02/testIO-logo-rgb-2.png" class="site-logo" />
</nav>
</div>
<div class="container-fluid hero"> </div>