Question

我在大学期间教我自己的html和css。

我正在尝试创建一个单页网站，并且正在努力尝试稍后在标题页上导航栏。最终，我希望导航栏成为每个页面的主要内容（稍后将通过javascript在项目中完成）。

有人能指出我正确的方向吗？我已经附上了下面的一些css代码。

干杯

{{1}}

Answer 1

你能用z-index来实现吗？没有一个例子看它有点难。 z-index属性指定元素的堆栈顺序（考虑向前或向后）。

尝试这样的事情：

.Nav {
z-index:
}

如果这不会带来.Nav，请尝试添加它：

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

您可能需要调整＃以获得最佳效果。＃越高，就越接近你。

注意：位置也可能需要在此调整。如果上面的代码不起作用并且发布该链接，最好把它放到像codepen这样的东西上。

Answer 2

你需要一个位置和一个z-index来实现这一目标。你必须让z-index的位置起作用。所以这里有两个例子，只记得让你的页面设置相同的位置，但较低的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;    
}

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

2 个答案: