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

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 索引来实现这一点。您必须具有 z 索引的位置才能工作。 所以这里有 2 个示例，只需记住将您的页面设置为相同的位置，但较低的 z 索引会将页面放置在导航栏下方。 希望对您有所帮助。

如果您希望在页面滚动到它后面时修复它。

.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 索引的标题页。

.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;    
}

Answer 2

你能使用 z-index 来实现这一点吗？没有例子可以看到它有点困难。z-index 属性指定元素的堆栈顺序(考虑向前或向后移动(。

尝试这样的事情：

.Nav {
z-index:
}

如果这没有带来 .向前导航，也尝试添加以下内容：

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

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

注意：位置可能也需要在此处进行调整。如果上述方法不起作用，最好将其放入类似代码笔中并发布该链接。