我制作了一个带有div元素的框，并希望在它的正上方放置一个导航栏.我希望导航栏粘在div框上，这样当页面调整大小时，它们仍然保持在一起.我try 通过使用"top"和"Left"属性调整导航栏的位置来手动完成此操作.但在调整页面大小后，我意识到它不起作用.
这就是我要说的，我的代码并不是写得最好的，因为总的来说我对CSS还很陌生.我已经添加了一个背景图像并对其进行了模糊处理，并制作了前面提到的div框.
.background {
background-image: url("Background.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
height: 100vh;
width: 100%;
}
.asdf {
margin: 0;
padding: 0px;
}
.asd {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(8px);
height: 100vh;
width: 100%;
}
#Box {
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
border: 4px solid #f1f1f1;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 60%;
padding: 20px;
}
.Bigbox {
font-weight: 500;
Font-family: Helvetica;
position: relative;
font-size: 20px;
color: white;
text-align: center;
}
.title {
font-weight: 700;
font-size: 40px;
transform: translate(0, -30%);
}
.text {
font-size: 25px;
text-align: justify;
}
#image1 {
border: 2px solid #f1f1f1;
width: 500px;
Height: 300px;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;
position: relative;
}<head>
<Title> title </Title>
<link rel="stylesheet" type="text/css" href="Main.css">
</head>
<body class="asdf">
<div class="background">
<div class="asd">
<div>
<UL>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
</UL>
</div>
<div id="Box" class="Bigbox">
<div class="title">Lorem ipsum </div>
<div class="text"> lorem ipsum</div>
</div>
</div>
</div>
</body>如有任何帮助，我们不胜感激！
需要澄清的图片:
它是如何:
我想要的样子:
