如何固定Navbar位置使其不被其他元素挤压移位？

尝试制作侧边Navbar并在其右侧添加日历元素，但日历元素位置偏高，导致Navbar被挤到下方。希望Navbar保持在页面顶部附近的预期位置，同时能自由调整日历等元素到网站中部，且布局无冲突。

当前Navbar和日历元素都设置为display: inline-block，这类元素默认采用基线对齐（baseline），高度较高的元素会拉低另一个元素的位置，从而导致Navbar下移。

使用Flex布局来控制Navbar和日历的对齐方式，这是最简洁可靠的方案：

步骤1：添加容器包裹Navbar和日历 #

在HTML中，给Navbar和日历元素外层添加一个容器，用于统一控制布局：

<!-- 在Navbar和calendario外面添加这个容器 -->
<div class="main-container">
  <div id="navbar">
    <!-- 原Navbar内容 -->
  </div>
  <div id="calendario">
    <!-- 原日历内容 -->
  </div>
</div>

步骤2：修改CSS样式 #

更新CSS，给容器设置Flex布局，并调整元素的对齐方式：

/* 新增容器样式 */
.main-container {
  display: flex;
  align-items: flex-start; /* 让两个元素顶部对齐，解决下移问题 */
  justify-content: center; /* 让容器内元素整体水平居中，满足中部放置需求 */
  gap: 5px; /* 替代原Navbar的margin-right，控制元素间距 */
  padding: 5px; /* 给容器添加内边距，避免元素贴边 */
}

/* 调整Navbar样式，去掉原margin-right */
#navbar{
  background-color: #eeeeee;
  border-radius: 5px;
  height: 860px;
  width: 170px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); /* 修正原代码中错误的阴影透明度 */
  margin-top: 5px;
  /* 去掉margin-right:5px，改用gap控制间距 */
}

/* 修复header的错误属性：justify-self改为justify-content */
header{
  background: #224fb1;
  color: white;
  display: flex;
  justify-content: space-between; /* 原justify-self无效，改为justify-content */
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); /* 修正阴影透明度 */
}

完整修改后代码 #

HTML #

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="prac/calestilo.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="calendario.js"></script>
  <title>Calendario 2.0</title>
</head>
<body>
  <div class="cab">
    <header>
      <div>
        <img src="prac/icons/hambu.png" alt="Menu" id="iconmenu" height="40px">
      </div>
      <div>
        <h1 class="title">Calendario</h1>
      </div>
    </header>
  </div>
  <!-- 新增的主容器 -->
  <div class="main-container">
    <div id="navbar">
      <img src="prac/icons/logo_uni_2016.png" alt="Logo Uni" height="50px">
      <ul id="listnav" class="nav-menu">
        <li id="opcnav">
          <a id="botnav" href="http://localhost/calendario/Prac/miinfo.html" title="Mi Perfil" target="blank">
            <img src="prac/icons/user.png" alt="Mi Información" height="15px"> Mi Perfil
          </a>
        </li>
        <li id="opcnav"> 
          <img src="prac/icons/asistencia.png" alt="Asistencia" height="15px"> Asistencia
        </li>
        <li id="opcnav">
          <a id="botnav" href="http://localhost/calendario/Calendario.php" title="Calendario" target="blank" > 
            <img src="prac/icons/calendar.png" alt="Calendario" height="15px"> Calendario
          </a>
        </li>
        <li id="opcnav">En Proceso...</li>
      </ul>
    </div>
    <!-- 日历部分 -->
    <div id="calendario">
      <div id="anterior" onclick="mesantes()"></div>
      <div id="posterior" onclick="mesdespues()"></div>
      <h2 id="titulos"></h2>
      <table id="diasc">
        <tr id="fila0">
          <th></th><th></th><th></th><th></th><th></th><th></th><th></th>
        </tr>
        <tr id="fila1">
          <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
        </tr>
        <tr id="fila2">
          <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
        </tr>
        <tr id="fila3">
          <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
        </tr>
        <tr id="fila4">
          <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
        </tr>
        <tr id="fila5">
          <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
        </tr>
        <tr id="fila6">
          <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
        </tr>
      </table>
      <div id="fechaactual">
        <i onclick="actualizar()">HOY: </i>
      </div>
      <div id="buscafecha">
        <form action="#" name="buscar">
          <p>Buscar ... MES
            <select name="buscames">
              <option value="0">Enero</option>
              <option value="1">Febrero</option>
              <option value="2">Marzo</option>
              <option value="3">Abril</option>
              <option value="4">Mayo</option>
              <option value="5">Junio</option>
              <option value="6">Julio</option>
              <option value="7">Agosto</option>
              <option value="8">Septiembre</option>
              <option value="9">Octubre</option>
              <option value="10">Noviembre</option>
              <option value="11">Diciembre</option>
            </select>
            ... AÑO ...
            <input type="text" name="buscaanno" maxlength="4" size="4" />
            ... <input type="button" value="BUSCAR" onclick="mifecha()" />
          </p>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

CSS #

body{margin: 0;}
header{
  background: #224fb1;
  color: white;
  display: flex;
  justify-content: space-between; /* 修正原justify-self属性 */
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); /* 修正阴影透明度数值 */
}
#iconmenu{margin-left: 25px;margin-right: 25px;}
.title{display: flex;align-items: center;} /* 去掉无效的justify-self */
.titphp{font-size: large;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}
/* 新增主容器样式 */
.main-container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  padding: 5px;
}
#navbar{
  background-color: #eeeeee;
  border-radius: 5px;
  height: 860px;
  width: 170px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  margin-top: 5px;
}
ul{
  padding: 0;
  color: #444;
  list-style: none;
  width: 100%;
  height: 100%;
  text-align: center;
}
#opcnav{
  padding: 0;
  background-color: white;
  height: 25px;
  margin: 5px;
  border-radius: 5px;
}
#opcnav:hover{
  background-color: #91B6E4;
  font-weight: bold;
  transition-duration: 0.2s;
}
#botnav{
  text-decoration: none;
  color: #444;
  display: block;
}
#botnav:hover{
  border-radius: 5px;
  text-decoration: none;
  color: white;
  background-color: #91B6E4;
}
#datosalumno{
  background-color: #eeeeee;
  margin: 0px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  display: inline-block;
  border-radius: 5px;
}
#fotoalumno{margin: 10px;}
#calendar{margin: 5px;}
/* 日历部分样式 */
#calendario{
  border: 4px double black;
  max-width: 536px;
  background-color: #fffafa;
  text-align: center;
}
#diasc{border: 1px solid black;border-collapse: separate;border-spacing: 4px;}
#diasc th, #diasc td {font: normal 14pt arial;width: 70px;height: 30px;}
#diasc th{color: #990099;background-color: #5ecdec;}
#diasc td{color: #492736;background-color: #9bf5ff;}
#fechaactual {font: bold 12pt arial;padding: 0.4em;}
#fechaactual i {cursor: pointer;}
#fechaactual i:hover{color: blue;text-decoration: underline;}
#buscafecha{background-color: #663366;color: #9bf5ff;padding: 5px;}
#buscafecha select, #buscafecha input {background-color: #9bf5ff;color: #990099;font: bold 10pt arial;}
#buscafecha [type=text]{text-align: center;}
#buscafecha [type=button]{cursor: pointer;}

• 原代码中header的justify-self: space-between是无效的，Flex容器需要用justify-content来控制子元素的水平分布。
• 阴影透明度数值1.12是错误的，CSS中透明度取值范围是0-1，所以改为0.12。
• 用gap替代margin-right可以更灵活地控制元素间距，避免布局冲突。

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