DIV层级定位（含z-index）技术求助：如何实现多DIV层叠布局并正确放置sticky-top元素

嘿，我来帮你搞定这个CSS布局问题！你的需求是让那个红色的.sticky-top div夹在左侧内容的背景图和文本之间，同时纯CSS实现对吧？现在的问题主要出在结构层级和定位上下文上，咱们一步步调整：

问题分析 #

你当前的代码有两个核心问题：

1. .sticky-top 和左右两个列处于同一层级，并且它的定位父级是最外层的.infosite-container，所以会相对于整个容器居中，而不是嵌套在左侧内容区域内。
2. 要让元素夹在背景和文本之间，必须让它成为左侧内容div的子元素——因为元素的背景图层级默认低于该元素的所有子元素，这样才能通过z-index控制层级关系。

解决方案 #

修改后的HTML结构 #

把.sticky-top移到.infosite-left-content内部，放在文本元素之前：

<section class="infosite" id="infosite-section">
  <div class="container-fluid infosite-container">
    <div class="row">
      <div class="col-md-6 infosite-left-content">
        <!-- 把sticky-top移到左侧内容内部 -->
        <div class="sticky-top">
          <p>Sticky Top</p>
        </div>
        <!-- 左侧文本内容，确保层级高于sticky-top -->
        <div class="uptxt">
          <p>这里是左侧的文本内容，会显示在红色方块上方</p>
        </div>
      </div>
      <div class="col-md-6 infosite-right-content">
        <div class="uptxt">
          <p>右侧的图片/文本内容</p>
        </div>
      </div>
    </div>
  </div>
</section>

修改后的CSS代码 #

调整定位上下文和层级关系，确保.sticky-top处于正确位置：

.infosite-container { 
  margin: 0 auto; 
  width: 100%; 
  position: relative; 
}
.infosite-container .row { 
  display: table; 
  width: 100%; /* 新增：确保table布局占满容器宽度 */
}
.infosite-container [class*="col-"] { 
  float: none; 
  display: table-cell; 
  vertical-align: top; 
}
.sticky-top { 
  height: 150px; 
  width: 150px; 
  position: absolute; 
  background: red; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  z-index: 1; /* 设置层级低于文本 */
}
.infosite-left-content { 
  padding-top: 175px; 
  padding-bottom: 175px; 
  padding-left: 120px; 
  text-align: left; 
  background-image: url(../../images/img-01.jpg); 
  background-repeat: no-repeat; 
  background-size: cover; 
  background-position: center center; 
  min-height: 680px; 
  position: relative; /* 新增：作为sticky-top的定位上下文 */
  z-index: 99; 
}
.infosite-right-content { 
  padding-top: 175px; 
  padding-bottom: 175px; 
  padding-right: 120px; 
  padding-left: 60px; 
  text-align: left; 
  background-color: #bebebe; 
  min-height: 680px; 
  position: relative; 
  z-index: 99; 
}
.uptxt { 
  position: relative; 
  z-index: 2; /* 设置层级高于sticky-top，确保文本在上方 */
}

关键要点 #

1. 结构调整：将.sticky-top嵌套到左侧内容div内部，让它成为背景图所属元素的子元素，这样才能实现“背景-中间元素-文本”的层级。
2. 定位上下文：给.infosite-left-content添加position: relative，让内部的绝对定位元素（.sticky-top）相对于左侧内容区域居中，而不是整个页面容器。
3. 层级控制：通过z-index设置，让.sticky-top（z-index:1）处于背景图（默认层级最低）和文本（z-index:2）之间。
4. table布局补全：给.row添加width:100%，避免table布局的行宽度不足导致的错位问题。

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