Bootstrap 4：页面左下角文本块定位及响应式问题求助

嘿，太懂这种头疼的感觉了——想在页面左下角放个文本块，结果要么脱离所在的section乱跑，要么一缩放就把导航栏给盖住，试了各种方法都没搞定对吧？我来给你捋个靠谱的方案：

核心问题分析 #

你之前用position: absolute没搞定，大概率是父容器没设置相对定位，导致文本块相对于整个文档而不是section定位；另外层级（z-index）没处理好，才会覆盖导航栏；最后就是没做响应式的断点适配，小屏幕下自然出问题。

可行解决方案步骤 #

• 第一步：给文本块所在的section添加position: relative;，这是让absolute定位的子元素锚定在section内部的关键。
• 第二步：控制层级，给导航栏设置一个更高的z-index（比如z-index: 10;），然后给文本块设一个更低的z-index（比如z-index: 1;），这样就不会覆盖导航了。
• 第三步：添加响应式适配，用媒体查询或者Bootstrap的工具类，在小屏幕上调整文本块的位置、字体大小和宽度，避免溢出或遮挡内容。

最终CSS方案（感谢Lakindu Gunasekara） #

/* 给文本块的父section设置相对定位 */
.target-section {
  position: relative;
  min-height: 100vh; /* 确保section有足够高度，防止文本块超出 */
}

/* 左下角文本块的基础样式 */
.bottom-left-text-block {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 1; /* 低于导航栏的z-index，比如导航栏设z-index:10 */
  max-width: 280px; /* 限制最大宽度，避免小屏幕横向溢出 */
  padding: 0.75rem;
  background-color: rgba(255,255,255,0.9); /* 可选：加半透背景提升可读性 */
}

/* 响应式适配：小屏幕（手机端）调整 */
@media (max-width: 576px) {
  .bottom-left-text-block {
    bottom: 0.5rem;
    left: 0.5rem;
    font-size: 0.875rem;
    max-width: 220px;
    padding: 0.5rem;
  }
}

结合Bootstrap 4的补充说明 #

如果你想用Bootstrap 4的工具类简化代码，可以这么写：

• 给父section加position-relative类
• 给文本块加position-absolute bottom-0 left-0类，然后自己补z-index、max-width和媒体查询的样式，效果是一样的。

这样调整后，文本块会牢牢固定在section的左下角，不会脱离区域，小屏幕下也会自动适配，而且不会覆盖导航栏啦！

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