使用 CSS Grid 实现元素在垂直居中容器顶部吸顶效果

本文介绍如何利用 CSS Grid 布局，在垂直居中容器的上方放置一个元素，并实现当容器高度不足时，该元素能够吸附在容器顶部，避免被裁剪或隐藏的效果。无需 JavaScript 监听，仅通过纯 CSS 实现响应式布局。

解决方案：利用 CSS Grid 布局

该问题的核心在于如何在容器高度变化时，保证顶部元素始终可见。传统的 position: absolute 方案在容器高度不足时，元素容易超出容器范围而被裁剪。CSS Grid 提供了一种更优雅的解决方案。

核心思想：

1. 将容器设置为 Grid 布局。
2. 使用 grid-template-rows 定义三行：顶部元素上方空间、中间内容区域、底部元素下方空间。
3. 利用 align-items: end 将内容区域底部对齐，确保顶部元素在空间不足时吸附在容器顶部。
4. 将顶部元素放置在容器之外，确保它不会影响中间内容的居中。

代码示例：

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

以下代码展示了如何使用 CSS Grid 实现上述效果。

HTML:

<div class="wrapper">
  <img class="on-top" src="https://via.placeholder.com/300x100">
  <div class="centered">
    <h1>Heading</h1>
    <p>
      And some content. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
      book.
    </p>
  </div>
</div>
<button onclick="toggle()">toggle wrapper size</button>

CSS:

.wrapper {
  height: 600px; /* 初始高度，可以根据实际情况调整 */
  display: grid;
  grid-template-rows: 1fr auto 1fr; /* 定义三行：顶部空间、内容区域、底部空间 */
  justify-content: center; /* 水平居中内容 */
  align-items: end; /* 垂直方向底部对齐内容 */
}

.centered {
  background: #F00;
  width: 300px;
}

.on-top {
  margin-bottom: 16px;
}

button {
  position: absolute;
  top: 0;
  right: 0;
}

JavaScript (可选，用于演示容器高度变化):

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

let i = 0;

function toggle() {
  document.querySelector('.wrapper').style.height = i++ % 2 === 0 ? '300px' : '600px';
}

代码解释：

• .wrapper: 设置 display: grid 开启 Grid 布局。grid-template-rows: 1fr auto 1fr 定义了三行，第一行和第三行占据剩余空间的 1/2，第二行 auto 表示根据内容自适应高度。justify-content: center 使内容水平居中，align-items: end 使内容在垂直方向底部对齐。
• .centered: 样式定义了中间内容区域的背景色和宽度。
• .on-top: 样式定义了顶部元素的底部外边距。

实现效果：

当 .wrapper 的高度足够时，.on-top 元素位于 .centered 元素的上方，并留有一定的 margin。当 .wrapper 的高度减小，导致 .on-top 元素即将超出容器顶部时，由于 align-items: end 的作用，.centered 元素会向上移动，使得 .on-top 元素始终保持可见，并吸附在容器顶部。

注意事项：

• 请根据实际需求调整 .wrapper 的初始高度。
• 可以根据需要修改 grid-template-rows 的值，调整顶部和底部空间的比例。
• 如果需要更复杂的布局，可以进一步利用 CSS Grid 的其他特性，如 grid-template-columns、grid-column、grid-row 等。

总结：

使用 CSS Grid 布局可以轻松实现元素在垂直居中容器顶部吸顶的效果，无需编写额外的 JavaScript 代码。这种方案具有良好的响应式特性，能够适应不同屏幕尺寸和容器高度的变化，是构建现代 Web 应用的理想选择。

以上就是使用 CSS Grid 实现元素在垂直居中容器顶部吸顶效果的详细内容，更多请关注php中文网其它相关文章！