基于Bootstrap的固定背景定位布局问题求助

Hey there! Let’s work through your fixed background and content positioning issues—they’re super common with this kind of setup, so we’ll get it sorted quickly.

Why You’re Seeing These Issues #

Let’s break down the root causes first:

• When figure is set to position: relative with height: 60%, its parent (your global wrapper) doesn’t have an explicit height defined. Percentage heights need a reference point, so the figure collapses to 0 height—making your background totally invisible.
• Switching figure to position: absolute yanks it out of the normal document flow. That means your contact form (which comes after the figure in your HTML) slides up to fill the empty space, causing the overlap you’re seeing.

Step-by-Step Solutions #

1. Give Your Global Wrapper a Defined Height #

Since your figure uses a percentage-based height, its parent needs a clear height to calculate from. If your wrapper should take up the full viewport (minus your fixed footer), add this:

.global-wrapper {
  position: relative;
  min-height: 100vh; /* Full viewport height */
  padding-bottom: 80px; /* Match this to your footer's height */
  box-sizing: border-box;
}

2. Tweak the Fixed Background CSS #

Update your figure and background styles to make the background visible while keeping it in the document flow:

figure {
  position: relative;
  width: 100%;
  height: 60vh; /* Use viewport height for consistent sizing across screens */
  margin: 0 !important;
  overflow: hidden; /* Prevent accidental content overflow */
}

.fixed-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#fixed {
  background-image: url('img/mac.png');
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  z-index: -1; /* Send the background behind all other content */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

3. Keep Your Contact Form Visible #

If you still see overlap, add spacing to the top of your form and ensure it sits above the background:

.contact-form-container {
  margin-top: 2rem; /* Adjust this value to match your layout */
  position: relative;
  z-index: 1; /* Guarantees the form stays above the fixed background */
}

Updated HTML Structure #

Your existing markup is solid—just make sure your global wrapper wraps everything including the figure and form:

<div class="global-wrapper">
  <figure>
    <div class="fixed-wrap">
      <div id="fixed"></div>
    </div>
  </figure>

  <!-- Your contact form -->
  <div class="contact-form-container">
    <!-- Form content goes here -->
  </div>
</div>

<!-- Fixed footer -->
<footer class="fixed-footer">
  <!-- Footer content -->
</footer>

Quick Key Tips #

• Using vh (viewport height) for the figure ensures it scales with screen size without relying on parent heights.
• The z-index: -1 on #fixed pushes the background to the bottom layer, so your form and other content naturally sit on top.
• The padding-bottom on the global wrapper prevents your main content from getting hidden under the fixed footer.

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