使用z-index属性后文本仍无法显示在背景遮罩上方的求助

Hey there! No worries at all—z-index can be tricky when you're just starting out, let's fix this together.

问题根源 #

The core issue here is that z-index only works on elements with a position value that's not static (the default positioning for all elements). Your .bg-tint .content h3 has z-index: 6 set, but since it uses the default position: static, that z-index doesn't actually take effect. Meanwhile, your .bg-tint:before mask is absolutely positioned with z-index: 2, so it naturally sits on top of the static-positioned text.

修复方案 #

We just need to add a non-static position to your text container (or the text itself) so its z-index can work properly:

• Add position: relative to either the .content wrapper or directly to the h3 (adding it to .content is better if you want all inner content to sit above the mask)
• Keep the z-index value higher than the mask's z-index: 2 (your original 6 works perfectly)

修改后的代码 #

CSS

.parallax { 
  /* The image used */ 
  background-image: url("https://www.lincoln.ac.uk/home/media/responsive2017/studywithus/internationalstudents/gatewayToEurope_1500x996px-min.jpg"); 
  /* Set a specific height */ 
  height: 100%; 
  /* Create the parallax scrolling effect */ 
  background-attachment: fixed; 
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover; 
} 

.bg-tint { 
  position: relative; 
} 

.bg-tint:before { 
  content: ""; 
  display: block; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  background: rgba(56,56,56, 0.9); 
  transition: all .3s linear; 
  z-index: 2; 
} 

/* 新增position: relative，让z-index生效 */
.bg-tint .content {
  position: relative;
  z-index: 6;
}

HTML

<div class="parallax bg-tint"> 
  <div class="content"> 
    <h3 style="padding-top:200px; padding-bottom: 200px;font-weight: 400; font-size: 64px; color:white;">Covering your location!</h3> 
    <p>We cover most English speaking countries, including yours!</p> 
  </div> 
</div>

额外小提示 #

By applying position: relative to the .content div, all elements inside it will inherit this positioning context. This means you won't have to set position on every single text element individually, making it easier to adjust other content (like the <p> tag) later if needed.

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