如何用CSS与TypeScript/JavaScript实现矩形叠加效果？求指导

需求与问题 #

我想用CSS和TypeScript/JavaScript实现矩形叠加的效果（绿色背景矩形上叠加一个黑色小矩形），尝试使用flex容器布局后，效果不符合预期，附上当前代码，恳请指导修正。

当前代码 #

CSS 代码 #

.green-area {
  display: flex;
  flex-grow: 1;
  margin-right: @space-sm;
  position: relative;
}

.black-area {
  display: flex;
  flex-grow: 1;
  position: absolute;
  background: #000000;
  height: 20px;
  width: 5%;
}

.height {
  height: @space-sm;
}

HTML 代码 #

<div styleName="green-area">
  <div style={{ flexGrow: 10, }}>
    <div styleName={`height`}>
      <div styleName="black-area">
        <div style={{ flexGrow: 10, }}>
          <div styleName={`height`} />
        </div>
      </div>
    </div>
  </div>
</div>

问题分析 #

1. 绿色区域无基础样式：.green-area没有设置背景色和明确的宽高，导致绿色矩形无法正常显示。
2. 绝对定位缺少偏移值：.black-area使用position: absolute但未设置top/left等定位属性，无法控制其在绿色区域内的位置。
3. flex布局嵌套冗余：多层不必要的flex嵌套，反而干扰了元素的定位逻辑。

修正方案 #

方案一：绝对定位实现（推荐） #

这种方式更直观，适合叠加类布局：

修改后 CSS

/* 假设@space-sm为预定义变量，例如20px */
.green-area {
  position: relative; /* 作为绝对定位的父容器 */
  width: 200px; /* 根据需求调整宽度 */
  height: 40px; /* 根据需求调整高度 */
  background-color: #4CAF50; /* 设置绿色背景 */
  margin-right: @space-sm;
}

.black-area {
  position: absolute;
  background: #000000;
  height: 20px;
  width: 5%; /* 基于父容器宽度的比例，也可设固定值如10px */
  /* 定位到左上角，可按需调整 */
  top: 0;
  left: 0;
  /* 如需垂直水平居中，替换为：
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  */
}

修改后 HTML

<div styleName="green-area">
  <div styleName="black-area"></div>
</div>

方案二：flex布局实现 #

如果偏好使用flex，可通过flex的对齐属性实现：

修改后 CSS

.green-area {
  display: flex;
  align-items: center; /* 垂直居中黑色矩形 */
  width: 200px;
  height: 40px;
  background-color: #4CAF50;
  padding: 0 5px; /* 可选，调整内边距 */
}

.black-area {
  background: #000000;
  height: 20px;
  width: 5%; /* 或使用flex-grow: 0.05; 需确保父容器有足够剩余空间 */
}

修改后 HTML

<div styleName="green-area">
  <div styleName="black-area"></div>
</div>

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