如何让navbar与div元素固定绑定，页面缩放仍保持贴合？

我用div制作了一个盒子，希望将导航栏（navbar）精准放置在它的正上方，且两者保持固定绑定，页面缩放时仍能贴合在一起。尝试过手动调整导航栏的top和left属性定位，但页面缩放后该方法失效。以下是我当前的代码（刚接触CSS，代码可能不够规范），同时添加了背景图和模糊效果：

当前代码 #

CSS 代码 #

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

HTML 代码 #

<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>

效果对比 #

• 当前效果：
  
• 期望效果：
  

解决方案 #

核心思路是将导航栏和盒子放入同一个居中的父容器，让两者成为一个整体，这样页面缩放时会一起保持相对位置：

修改后的完整代码 #

CSS 代码

.background {
  background-image: url("Background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  height: 100vh;
  width: 100%;
}

.asdf {
  margin: 0;
  padding: 0;
}

.asd {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  height: 100vh;
  width: 100%;
  position: relative; /* 作为绝对定位的参考容器 */
}

/* 新增父容器，包裹导航栏和盒子 */
.box-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%; /* 和盒子宽度保持一致 */
}

#Box {
  background-color: rgba(0, 0, 0, 0.4);
  border: 4px solid #f1f1f1;
  border-radius: 4px;
  position: relative; /* 依赖父容器居中，无需单独定位 */
  z-index: 2;
  padding: 20px;
}

.Bigbox {
  font-weight: 500;
  font-family: Helvetica;
  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;
  width: 100%; /* 让导航栏宽度匹配父容器 */
}

HTML 代码

<head>
  <Title> title </Title>
  <link rel="stylesheet" type="text/css" href="Main.css">
</head>

<body class="asdf">
  <div class="background">
    <div class="asd">
      <!-- 用父容器包裹导航栏和盒子，实现绑定 -->
      <div class="box-container">
        <UL>
          <li><a href="#home">Home</a></li>
          <li><a href="#news">News</a></li>
          <li><a href="#contact">Contact</a></li>
        </UL>
        <div id="Box" class="Bigbox">
          <div class="title">Lorem ipsum </div>
          <div class="text"> lorem ipsum</div>
        </div>
      </div>
    </div>
  </div>
</body>

修改说明 #

1. 新增.box-container父容器，通过position: absolute+transform: translate(-50%, -50%)实现整体居中，宽度和盒子保持一致；
2. 将导航栏和盒子移入该父容器，让两者成为绑定的整体；
3. 调整盒子为position: relative，不再单独设置居中，依赖父容器的居中效果；
4. 给导航栏的ul设置width:100%，使其宽度和父容器匹配，刚好贴合在盒子上方；
5. 给.asd添加position: relative，确保.box-container的绝对定位以它为参考。

修改后，导航栏和盒子会始终保持绑定关系，页面缩放时不会错位。

内容的提问来源于stack exchange，提问作者Sagittari_17