浏览器窗口缩放时垂直导航栏被文本覆盖的问题求助

Hey there! Let's troubleshoot why your vertical navbar is getting overlapped by text when resizing the browser window. Based on what you've shared, here are the most likely fixes:

Common Issues & Solutions #

First, let's break down why the overlap is happening:

• Your navbar might not have an explicit width, so when the window shrinks, other columns push into its space.
• If you used position: fixed, you might be missing key properties like z-index (to keep it on top) or top/left (to lock its position).
• Your column layout (maybe using floats?) might not be responsive enough to handle window resizing.

Fix 1: Proper Fixed Positioning with Z-Index

If you want to stick with position: fixed, make sure you add these critical properties to your .vertical-nav class:

@import url('https://fonts.googleapis.com/css?family=Roboto');

.username {
  font-family: Roboto;
  font-size: 14pt;
  vertical-align: top;
  text-align: left;
  padding: 10px;
}

.vertical-nav {
  width: 220px; /* Set a fixed width so it doesn't shrink */
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh; /* Make it full viewport height */
  z-index: 100; /* Ensures it sits above other content */
  background-color: #fff; /* Add a background to hide text behind it */
  padding: 15px;
}

/* Make sure your main content doesn't go under the navbar */
.main-content {
  margin-left: 250px; /* Match navbar width + padding */
  padding: 20px;
}

This locks the navbar to the left side, keeps it above other elements, and forces your main text to stay in its own space.

Fix 2: Use Flexbox for a Responsive Column Layout

If you'd prefer a more modern, responsive approach (no position: fixed needed), switch to flexbox. It handles resizing automatically:

@import url('https://fonts.googleapis.com/css?family=Roboto');

/* Reset default body margins first */
body {
  margin: 0;
  display: flex; /* Turns body into a flex container */
}

.username {
  font-family: Roboto;
  font-size: 14pt;
  vertical-align: top;
  text-align: left;
  padding: 10px;
}

.vertical-nav {
  flex-shrink: 0; /* Prevents navbar from being squeezed */
  width: 220px;
  background-color: #f5f5f5;
  padding: 15px;
}

.main-content {
  flex-grow: 1; /* Lets main content take up remaining space */
  padding: 20px;
}

With flexbox, the navbar will stay at its fixed width, and the main content will adjust smoothly as the window resizes—no overlap, no extra hacks.

Bonus: Add Mobile Responsiveness

If you want the navbar to adapt to smaller screens, add a media query:

@media (max-width: 768px) {
  .vertical-nav {
    width: 70px; /* Shrink navbar on mobile */
  }
  .main-content {
    margin-left: 90px; /* Adjust margin to match */
  }
}

Quick Checks to Double-Check #

• Did you forget to set a background color on the navbar? Without it, text from the main content will show through even if the navbar is positioned correctly.
• If you were using floats before, make sure you cleared them (floats can cause unexpected layout overlaps). Flexbox avoids this entirely.

Hope this fixes your overlap issue! Let me know if you need to tweak anything further.

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