要避免工具栏被导航抽屉覆盖，可以使用CSS的z-index属性来控制元素的堆叠顺序。以下是一个示例代码：

HTML:

CSS:

.toolbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #f1f1f1;
  z-index: 100; /* 设置一个较高的z-index值 */
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #ccc;
  z-index: 50; /* 设置一个较低的z-index值 */
}

在上面的代码中，我们给工具栏设置了一个较高的z-index值（100），而给导航抽屉设置了一个较低的z-index值（50）。这样就确保工具栏在堆叠顺序上位于导航抽屉的上方，从而避免被导航抽屉覆盖。

请注意，z-index只在元素的position属性值为relative、absolute或fixed时才会生效。因此，我们在示例代码中给工具栏和导航抽屉都设置了position: fixed来启用z-index属性的效果。

此外，为了让工具栏固定在页面的顶部，我们给工具栏设置了top: 0和left: 0，并根据需要调整了宽度和高度。导航抽屉也是类似的设置，只是宽度设置为固定的200px。

请根据实际需求调整代码中的样式和尺寸。