练习CSS定位时<h2>被.mission div遮挡的问题排查求助

Element #

Hey there! Let's break down why your <h2> on line 25 is getting blocked by the .mission div—this is a super common layout snag when working with positioning, so we'll fix it in no time.

Most Likely Causes & Fixes #

1. Your .mission div is脱离了正常文档流

If you've set .mission to use position: absolute or position: fixed, it pulls the element out of the normal page flow. That means the <h2> that comes after it will try to occupy the space where .mission was originally placed, making it look like it's being covered up.

Fixes:

• If you don't need .mission to be removed from the flow, change its positioning to position: relative (or just remove the position property entirely). This keeps it in the normal flow so the <h2> will sit below it automatically:

  .mission {
    position: relative; /* Replace absolute/fixed with this */
    height: 700px; /* Keep your existing height value */
    /* Rest of your .mission styles */
  }
  

• If you need to keep absolute/fixed positioning for .mission, you'll need to manually add space for the <h2> by setting a margin-top on its parent container (or the <h2> itself) equal to the height of .mission:

  .h2-container {
    margin-top: 700px; /* Match the height of your .mission div */
  }
  

2. Z-index层级问题

If both .mission and your <h2> are positioned (not static), .mission might have a higher z-index value, which makes it render on top of the <h2>.

Fix:
Give your <h2> a higher z-index than .mission, and make sure the <h2> has a non-static position (like relative) so z-index works:

.mission {
  position: absolute; /* Or whatever positioning you're using */
  z-index: 1; /* Lower value */
}

h2 {
  position: relative; /* Required for z-index to take effect */
  z-index: 10; /* Higher than .mission's z-index */
}

Quick Check List #

• Double-check the position property on .mission—is it set to absolute/fixed when it doesn't need to be?
• Verify the height of .mission—if you're using absolute positioning, the parent container might not be stretching to contain it, leaving the <h2> in the wrong spot.
• Make sure your <h2> isn't accidentally set to position: static if you're trying to use z-index (static elements ignore z-index).

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