背景图像引导4.0顶部的Navbar

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

对父div使用display:relative;，对子(Nav)使用display:absolute;和top:0;。 每当您需要徽标(这是常见的用例)放置在顶部而不使用负值时，请使用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>

​