无法将我的导航栏覆盖在标题页背景上

Question

我在大学自学 html 和 css。

我正在尝试制作一个单页网站，并且正在努力尝试稍后将导航栏移到标题页上。最后，我希望导航栏成为每个页面的中流砥柱（这将在项目后期通过 javascript 完成）。

谁能指出我正确的方向？我在下面附上了一些 css 代码。

干杯

@import url('https://fonts.googleapis.com/css?family=Poiret+One');

a:link {
    text-decoration: none;
}

a:visited {
    color: white;
}

.Nav{
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    font-family: Poiret One;
}
.Nav li{
    display:inline;
    padding: 40px;
}
.Nav a{
    display:inline-block;
    padding:15px;
}

.Title-Page {
  background-image: url("Images/Campeche.jpg");
  background-size: cover;
  padding: 200px 0 260px 0;
  height: 600px;
  margin: 0;
}

Answer 1

您可以使用 z-index 来实现吗？没有一个例子可以看出它有点困难。 z-index 属性指定元素的堆叠顺序（考虑向前或向后）。

尝试这样的事情：

.Nav {
z-index:
}

如果这不能使 .Nav 前进，请尝试添加以下内容：

.Title-Page {
    z-index: -1;
}

您可能需要调整 # 以获得最佳结果。 #越高，离你越近

注意：此处的位置也可能需要调整。如果上述方法不起作用，最好将其放入 codepen 之类的东西中，并且 post 即 link.

Answer 2

你需要一个职位和一个 z-index 来实现这一目标。您必须拥有 z-index 的职位才能工作。所以这里有 2 个示例，请记住让您的页面设置相同的位置，但较低的 z-index 这会将页面放在导航栏下方。希望对你有帮助。

如果您希望在页面滚动到它后面时固定它。

.Nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
font-family: Poiret One;
position:fixed;
z-index:90

}

如果您希望导航栏随页面滚动。

.Nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
font-family: Poiret One; 
position:absolute;
z-index:90
}

标题页已设置好位置且下方 z-index。

.Title-Page {
background-image: url("Images/Campeche.jpg");
background-size: cover;
padding: 200px 0 260px 0;
height: 600px;
margin: 0;
position:absolute;
z-index:50;    
}

无法将我的导航栏覆盖在标题页背景上

Unable to overlay my navigation bar over the title page background

html

css

navigation

title