CSS 层叠上下文：确保元素浮于渐变背景之上

本教程旨在解决CSS中元素层叠顺序的常见问题，特别是如何确保一个按钮能正确地显示在一个由`linear-gradient`创建的半透明背景之上。文章将深入探讨`z-index`属性的作用机制，解释其如何与定位元素和层叠上下文协同工作，并通过具体的代码示例演示如何调整元素的层叠顺序，使特定组件（如按钮）在复杂的视觉布局中保持可见和可交互。

在网页设计中，我们经常需要创建复杂的视觉效果，例如在图片上叠加一层渐变蒙版，并在蒙版之上放置交互元素。然而，如果不正确管理CSS的层叠顺序，这些交互元素可能会被蒙版遮盖，导致用户无法点击或看到。本文将以一个具体的案例为例，详细讲解如何利用z-index属性来解决这类问题，确保您的元素能够按照预期的方式呈现。

遇到的问题：按钮被渐变蒙版遮盖

假设我们有一个包含图片、按钮和文本的容器。我们希望在图片上方添加一个从底部向上逐渐透明的渐变蒙版，同时确保按钮始终显示在蒙版之上，尤其是在鼠标悬停时。

以下是初始的HTML和CSS结构，它导致了按钮被渐变蒙版遮盖的问题：

立即学习“前端免费学习笔记（深入）”；

HTML 结构：

<div class="image">
   <img style="object-fit: cover; width:350px; height:250px;" src="https://st.depositphotos.com/1224365/2498/i/950/depositphotos_24980235-stock-photo-portrait-of-a-normal-man.jpg" alt="">
   <button type="button" class="mybuttonoverlap btn btn-info">Read More</button>
   <div class="qualquer">MISSÃO E OBJETIVOS</div>
</div>

初始 CSS 样式：

  .image {
    position: relative;
    z-index:1;
    display: flex;
    justify-content: center;
  }

  .image::after{
    content:"";
    position:absolute;
    background: linear-gradient(0deg,        rgba(39,38,42,1) 0%, rgba(255,255,255,0)     60%);
    z-index:2; /* 渐变蒙版的z-index */
    height:100%;
    width:100%;
    top:0;
    left:0;
  }

 .image:hover .qualquer {                          
    top: 50%;
  }

 .image:hover .mybuttonoverlap{ 
    display:block;
  }

  .mybuttonoverlap{
    position: absolute;
    color: #000000;
    background-color: #ffffff;
    border-color: #ffffff;
    border-radius: 30px;
    top: 190px;
    display: none; /* 初始隐藏 */
  }

   .qualquer {
    position: absolute;
      width: 325px;
      top: 87%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      color: #ffffff;
      text-align: center;
  }

在这个布局中，.image 容器设置了 position: relative 和 z-index: 1。其伪元素 ::after 用于创建渐变蒙版，并被赋予了 position: absolute 和 z-index: 2。这意味着渐变蒙版 .image::after 位于其父元素 .image 的层叠上下文的顶部。而 mybuttonoverlap 按钮虽然也设置了 position: absolute，但没有明确设置 z-index。在没有明确 z-index 的情况下，定位元素的层叠顺序通常是按照它们在HTML中出现的顺序，或者其默认的层叠级别。由于渐变蒙版 ::after 的 z-index 为 2，而按钮的 z-index 默认可能低于 2（或在同一层叠上下文内未指定时，按照文档流顺序），因此按钮被蒙版遮盖了。

解决方案：调整 z-index

解决这个问题的关键在于理解和正确使用 z-index 属性。z-index 属性指定了定位元素及其子元素在当前层叠上下文中的层叠顺序。数值越大的元素会显示在数值较小的元素之上。

Cutout老照片上色

Cutout.Pro推出的黑白图片上色

20

查看详情

要让按钮显示在渐变蒙版之上，我们只需要将按钮的 z-index 值设置为一个比渐变蒙版 (.image::after 的 z-index 为 2) 更大的数值。例如，我们可以将其设置为 3。

修正后的 CSS 样式：

/* ... 其他样式不变 ... */

.mybuttonoverlap {
    position: absolute;
    color: #000000;
    background-color: #ffffff;
    border-color: #ffffff;
    border-radius: 30px;
    top: 190px;
    display: none;
    z-index: 3; /* 关键：设置比渐变蒙版更高的z-index */
}

/* ... 其他样式不变 ... */

通过添加 z-index: 3; 到 .mybuttonoverlap 样式规则中，按钮现在将拥有更高的层叠级别，从而能够正确地显示在渐变蒙版之上，无论是初始状态还是鼠标悬停时。

关键概念与最佳实践

为了更好地理解和避免类似的层叠问题，我们需要掌握以下几个核心概念：

1. 定位元素 (position)z-index 属性只对定位元素（即 position 属性值为 relative, absolute, fixed, 或 sticky 的元素）有效。对于 position: static 的元素，z-index 不会产生任何效果。

2. 层叠上下文 (Stacking Context) 层叠上下文是HTML元素的一个三维概念，它决定了元素在Z轴上的堆叠顺序。每个层叠上下文都有其独立的层叠顺序，子元素的 z-index 只在其父层叠上下文内有效。 以下属性可以创建层叠上下文：

   • position 值为 absolute 或 relative 且 z-index 不为 auto。
   • position 值为 fixed 或 sticky。
   • opacity 值小于 1。
   • transform、filter、perspective、clip-path 等属性值不为 none。
   • will-change 属性值指定了任何可以创建层叠上下文的属性。
   • display: flex 或 grid 的子项，如果 z-index 不为 auto。

   在我们的例子中，.image 容器因为 position: relative; z-index: 1; 而创建了一个层叠上下文。.image::after 和 .mybuttonoverlap 都在这个层叠上下文内进行层叠排序。

3. 默认层叠顺序 在没有明确指定 z-index 或处于同一 z-index 级别时，元素的默认层叠顺序（从下到上）大致如下：

   • 背景和边框
   • 负 z-index 的定位子元素
   • 块级非定位元素
   • 浮动元素
   • 行内非定位元素
   • z-index: auto 或 z-index: 0 的定位子元素（以及未定位的子元素）
   • 正 z-index 的定位子元素

   理解这个顺序有助于我们在不使用 z-index 时预测元素的行为。

总结

通过本教程，我们学习了如何利用 z-index 属性来解决元素层叠顺序的问题，特别是当一个元素（如按钮）被另一个元素（如渐变蒙版）遮盖时。核心思想是确保需要显示在顶部的定位元素拥有一个比其下层元素更高的 z-index 值。同时，深入理解层叠上下文和默认层叠顺序对于构建复杂而可靠的CSS布局至关重要。在实际开发中，建议合理规划 z-index 值，并利用浏览器开发者工具来调试和检查元素的层叠情况，以确保页面元素的正确显示和交互。

以上就是CSS 层叠上下文：确保元素浮于渐变背景之上的详细内容，更多请关注php中文网其它相关文章！