HTML怎么在图片上设置浮动导航栏

HTML怎么在图片上设置浮动导航栏，请大神教教我

浮动导航栏，是什么效果，发个图片看看

你题目的解答代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
body {
    margin: 0;
}

#box {
    width: 100%;
    height: 400px;
    background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqqpublic.qpic.cn%2Fqq_public%2F0%2F0-2159974650-D5A6BEF927D3A436896CD28D3DCFDE38%2F0%3Ffmt%3Djpg%26size%3D119%26h%3D506%26w%3D900%26ppv%3D1.jpg&refer=http%3A%2F%2Fqqpublic.qpic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641294041&t=48efeb28e5394335e506a34e95d4def4') no-repeat scroll top;
}
#ds {
    height: 50px;
    text-align: right;
    color: #FFF;
    font-size: 30px;
    padding: 50px 50px 0px 0px;
    background-color: rgba(50,100,255,0.5);
}
</style>
</head>
<body>

<div id="box">
    <div id="ds">
        导航栏 导航栏 导航栏 导航栏
    </div>
</div>

</body>
</html>

img

如有帮助，望采纳！谢谢!

1.导航栏设置背景图片
2.图片和导航辣么都放一个div(这个div设置相对定位relative)里，然后都设置absolute绝对定位，再将导航栏的层级设置高一点z-index
如有帮助，望采纳^O^