如何将text-block元素放置在页面顶部并覆盖背景栏

解决方案 #

1 先修复代码语法错误 #

你的现有代码存在两处语法问题，会影响页面正常渲染：

• 输出text-block的区块缺少对应的<section>起始标签，直接使用了</section>闭合，需要补全结构：

$text_block = get_field('text_block');
$locations = get_field('locations');
?>
<!-- 补全section起始标签 -->
<section class="text-block-wrapper">
    <div class="container width-1130">
        <div class="text-block">
            <?php echo $text_block; ?>
        </div>
    </div>
</section>
<?php
?>

• 下方的script标签未正确闭合，需修正为合法格式，避免渲染异常。

2 添加CSS样式实现顶层覆盖 #

给你新增的text-block-wrapper类添加如下样式即可实现置顶覆盖效果：

.text-block-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* z-index数值需要大于你要覆盖的背景栏的层级，不够可继续调高 */
    z-index: 9999;
}

如果需要文本块固定在视口顶部不随页面滚动，将position属性改为fixed即可。

3 异常排查 #

如果设置后仍然不显示在顶层，按以下方向排查：

• 确认text-block-wrapper的父元素没有设置z-index属性且数值低于背景栏的层级，层叠上下文会限制子元素的层级优先级
• 检查text-block或者其父元素是否设置了小于1的opacity属性、transform属性，二者会创建新的层叠上下文，导致z-index设置失效
• 检查父元素是否设置了overflow: hidden将文本区块截断

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