设置position: fixed的h1随页面滚动移动，如何固定在指定位置？

问题根源 #

你当前给文字容器设置的position: fixed是相对于浏览器视口定位的，所以只要页面滚动，元素就会固定在屏幕的对应位置，自然会跟着屏幕移动。

解决方案 #

你只需要调整HTML结构和对应CSS即可，核心是利用相对定位父元素包裹绝对定位子元素的规则实现文字相对于图片容器定位：

步骤1：调整HTML结构 #

把文字容器移到已经设置了position: relative的.pt-gradient-overlay容器内部，这样文字容器的定位基准就会变成图片外层的渐变容器：

<div class="pt-gradient-overlay">
    <img src="https://scu.mb.ca/SCU/media/Images/Content%20Images/content-checking-account.jpg" alt="placeholder" class="pt-page-header__image">
    <div class="pt-page-header__wrapper__content">
        <h1 class="pt-page-header__title">test</h1>
    </div>
</div>

步骤2：修改文字容器CSS #

把定位属性从fixed改为absolute，按需调整位置参数，同时加上z-index保证文字不会被渐变遮罩覆盖：

.pt-page-header__wrapper__content {
    max-width: 600px;
    position: absolute;
    /* 以下位置数值可根据你的需求自由调整 */
    top: 50px;
    left: 30px;
    /* 保证文字层级高于渐变层 */
    z-index: 10;
}

修改完成后文字就会固定在图片的对应位置，页面滚动时会跟着图片容器一起随文档流移动，不会一直悬浮在屏幕上。

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