如何将子DIV固定在父DIV的可视区域顶部？

巧妙运用CSS，让子DIV始终停留在父DIV可视区域顶部

本文将讲解如何使用CSS定位属性，实现图中红色块始终固定在父DIV可视区域顶部的效果。

首先，为原有的父DIV添加一个外层容器：

  <!-- 原来的父DIV代码 -->

然后，为红色块及其父级DIV设置如下CSS样式：

  <!-- 红色块代码 -->

最后，添加CSS样式，将红色块的父级DIV固定在父DIV可视区域顶部：

.red-block-wrapper {
  top: 0;
  /* 其他样式 */
}

通过以上步骤，红色块将始终固定在父DIV的可视区域顶部，即使父DIV内容滚动，红色块位置也不会改变。 这正是我们期望的固定效果。