Cargo页面堆叠中悬停网格溢出至下一页问题求助

Hey there! Let's work through this grid overflow issue you're encountering with your Cargo project. Based on the code snippet you shared, here are targeted suggestions to keep your grid elements contained within their page section instead of spilling into the next page:

1. Contain the Absolute Positioned Background with a Parent Container #

Your #bg uses absolute positioning, which removes it from the normal document flow—this is likely why it's spilling across pages. Wrap it in a relative-positioned parent container to constrain it to the current page:

/* Add this for your page sections */
.page-section {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden; /* Critical: stops internal elements from overflowing */
}

/* Update your #bg styles */
#bg {
  width: 100%; /* Replace 110vw with 100% to fit the parent container */
  top: 0;
  left: 0;
  position: absolute;
  z-index: 2;
  overflow: hidden; /* Ensures grid items don't escape this container */
}

Then structure your HTML like this:

<div class="page-section">
  <div id="bg">
    <div class="grid"></div>
    <!-- All your other grid divs -->
  </div>
</div>
<!-- Next page section -->
<div class="page-section">
  <!-- Content for the next page -->
</div>

2. Replace Float with a More Stable Layout Method #

Using float: left for grid items can lead to unexpected layout behavior, especially with absolute containers. Switch to Flexbox for cleaner, more predictable wrapping:

#bg {
  /* Keep your existing styles, add these */
  display: flex;
  flex-wrap: wrap;
  max-width: 100vw; /* Lock the background to viewport width */
}

#bg .grid {
  float: none; /* Remove the float */
  width: 50px;
  height: 50px;
  margin: 0;
  background: url('your-image-url') no-repeat center center fixed;
  background-size: cover;
}

flex-wrap: wrap will automatically move grid items to a new line when they hit the container edge, preventing overflow.

3. Avoid Unnecessary Viewport Width Overhang #

Your #bg uses width: 110vw, which makes it 10% wider than the viewport. Unless you specifically need this overhang, stick to width: 100% to align with your page container. If you do need a slight overhang, use calc() to keep it controlled:

#bg {
  width: calc(100% + 20px); /* Adds 20px total overhang (10px left/right) */
  left: -10px; /* Offset to center the overhang */
}

Since you're new to development, don't stress—layout quirks like this are totally normal as you learn how CSS positioning interacts with document flow. Experiment with these fixes, and feel free to ask follow-up questions if something isn't clicking!

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