使用Z-Index实现图片覆盖无法显示下方元素及Bootstrap 4图形定位问题

Hey there! Let’s tackle those two layout problems you’re hitting with your Bootstrap 4 project. I’ve worked through similar fixed-position and z-index headaches before, so let’s break this down step by step.

1. Keeping the Graphic Fixed Across All Screen Sizes #

The issue with setting a static width: 75% on a fixed element is that it won’t adapt seamlessly to responsive screen changes, plus fixed elements are removed from the document flow—meaning your left text might get overlapped or not leave enough space. Here’s a robust solution using Bootstrap classes and custom CSS:

Step 1: HTML Structure #

We’ll split the layout into a left content wrapper (to hold your text) and a fixed right graphic container:

<div class="container-fluid px-0">
  <!-- Left Text Content -->
  <div class="content-area">
    <div class="container py-5">
      <!-- Your text content goes here -->
      <h1>Left-Aligned Text</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>
  </div>

  <!-- Right Fixed Graphic -->
  <div class="fixed-graphic">
    <img src="your-graphic-path.jpg" alt="Hero Graphic" class="img-fluid h-100 w-100" style="object-fit: cover;">
  </div>
</div>

Step 2: Custom CSS #

This ensures the graphic stays fixed on the right, and the left text always has space to breathe—even on small screens:

/* Base styles for desktop */
.content-area {
  /* Reserve space for the 75% wide fixed graphic */
  margin-right: 75%;
  /* Ensure content stays above the graphic if needed */
  position: relative;
  z-index: 10;
}

.fixed-graphic {
  position: fixed;
  top: 0;
  right: 0;
  width: 75%;
  height: 100vh; /* Full viewport height */
  overflow: hidden; /* Crop graphic if it exceeds container */
}

/* Responsive adjustment for mobile */
@media (max-width: 768px) {
  .content-area {
    margin-right: 0; /* Let text take full width on small screens */
  }

  .fixed-graphic {
    position: static; /* Disable fixed positioning on mobile */
    width: 100%;
    height: 300px; /* Set a fixed height for mobile, or use auto */
  }
}

Key Notes: #

• Use object-fit: cover on the image to maintain its aspect ratio while filling the fixed container.
• The media query switches the graphic to a static block on mobile—this is more user-friendly than keeping it fixed on small screens.

2. Fixing Z-Index Issues (Seeing Elements Under the Graphic) #

Z-index only works on elements that have a non-static position (relative, absolute, fixed). If you can’t see elements under the graphic, here’s what’s likely going wrong and how to fix it:

Common Causes & Solutions: #

1. Your graphic has a higher z-index than the content

   • By default, fixed elements sit above static elements. To fix this, explicitly set a lower z-index on the graphic container and a higher one on your content:

     .content-area {
       position: relative; /* Required for z-index to work */
       z-index: 10;
     }
     
     .fixed-graphic {
       position: fixed;
       z-index: 5; /* Lower than content's z-index */
     }
     

2. Parent elements are creating a stacking context

   • If a parent of your content has a z-index set, your content’s z-index will only apply within that parent’s stacking context. Make sure no parent of your content has a z-index that’s lower than the graphic’s.

3. The hidden element is statically positioned

   • If the element under the graphic uses position: static (the default), z-index won’t affect it. Add position: relative to that element and set a z-index higher than the graphic’s:

     .hidden-element {
       position: relative;
       z-index: 15; /* Higher than both content and graphic */
     }
     

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