React+TypeScript+SCSS模拟时钟项目：Div相对位置设置失败求助

看起来你在构建React+TS+SCSS的模拟时钟时遇到了定位相关的问题，我帮你梳理下代码里的几个关键问题，以及修正后的方案：

你的SCSS代码里的核心问题 #

• 多余的单引号：CSS属性值不需要用单引号包裹，比如 position: 'relative' 应该改成 position: relative，带引号会被浏览器识别为无效值，直接导致定位规则不生效。
• 缺失长度单位：width: 200、height: 200、height: 1 这些都没有指定单位（比如px），浏览器无法正确解析这些尺寸，自然没法渲染出预期的元素位置和大小。
• 指针定位方式错误：秒针用position: relative的话，是基于自身初始位置偏移，没法精准对齐表盘中心，应该用绝对定位配合父元素的相对定位来实现指针的居中旋转效果。

修正后的SCSS代码 #

// 表盘样式：作为指针的定位参考容器
.dial-style {
  position: relative;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border-style: solid;
  border-color: #000;
}

// 秒针样式
.second-hand-style {
  position: absolute; // 改为绝对定位，基于父表盘定位
  top: 50%;
  left: 50%;
  border: 1px solid red;
  width: 40%;
  height: 1px;
  transform-origin: 0% 50%; // 旋转原点设为指针左端的垂直中点，确保绕表盘中心旋转
  background-color: #ff0000;
  transform: translateY(-50%); // 抵消top:50%的垂直偏移，让指针中心与表盘中心对齐
}

// 分针样式（补全你未写完的部分，遵循同样的定位逻辑）
.minute-hand-style {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid #333;
  width: 35%;
  height: 2px;
  transform-origin: 0% 50%;
  background-color: #333;
  transform: translateY(-50%);
}

关键调整说明 #

1. 把表盘设为position: relative，这样内部的绝对定位元素（指针）会以表盘为参考系进行定位。
2. 指针改用position: absolute，通过top:50%和left:50%先将元素左上角移到表盘中心，再用transform: translateY(-50%)让指针垂直居中，确保指针的旋转轴心与表盘中心重合。
3. transform-origin: 0% 50%将旋转原点设置在指针靠近表盘中心的一端，这样指针旋转时就会自然绕表盘中心转动，符合真实时钟的指针逻辑。
4. 补全所有缺失的长度单位，确保浏览器能正确解析元素尺寸规则。

这样调整后，你应该就能正常设置元素的定位，实现时钟的基础布局效果了。

内容的提问来源于stack exchange，提问作者Knows Not Much