gpt4 book ai didi

html - 如何让我的导航栏远离标题图片?

转载 作者:行者123 更新时间:2023-11-28 06:32:37 27 4
gpt4 key购买 nike

所以我无法找到一种方法来防止我网站中的导航栏自动将其自身置于标题图像之上!我尝试将导航栏的位置设置为相对位置,但这没有任何作用!我想让我的标题图片的位置保持在顶部和左侧 0,但是如果不将图像位置设置为绝对位置,我无法让图像在屏幕上保持在顶部和左侧 0!

body {
font-family: Roboto;
background-color: #F0F0F0;
}
.header-img {
position: absolute;
background-repeat: no-repeat;
top: 0px;
left: 0px;
}
.navbar ul {
list-style-type: none;
color: white;
position: relative;
}
.navbar ul li {
border: 1px solid black;
padding-right: 2em;
padding-left: 2em;
display: inline;
}
<!DOCTYPE html>

<head>
<title>Official Rusty Ohio Server</title>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css">

</head>

<body>
<img src="rusty ohio background.png" class="header-img" width="100%" height="95%">

<nav class="navbar">
<ul>
<li>Plugins</li>
<li>Server Status</li>
<li>Donate</li>
</ul>
</nav>

</body>

</html>

最佳答案

在 CSS 中试试这个

    .navbar{
position: absolute;
z-index: 11;
}
.header-img{
z-index:10;
}

关于html - 如何让我的导航栏远离标题图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34892156/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com