Css 无法设置div的相对位置

我正在用React、Typescript和SCSS做一个模拟时钟项目。我的目标是在SCSS文件中编写尽可能多的CSS，并尽量减少内联CSS。（或者根本没有）

我写了这个SCSS文件

.dial-style {
  position: 'relative';
  top: 0;
  left: 0;
  width: 200;
  height: 200;
  border-radius: 100%;
  border-style: solid;
  border-color: #000;
}

.second-hand-style {
  position: 'relative';
  top: 50%;
  left: 50%;
  border: 1px solid red;
  width: 40%;
  height: 1;
  transform-origin: 0% 0%;
  background-color: #ff0000;
}

.minute-hand-style {
  position: 'relative';
  top: 100;
  left: 100;
  border: 1px solid grey;
  width: 40%;
  height: 3;
  transform-origin: 0% 0%;
  background-color: grey;  
}

.hour-hand-style {
  position: 'relative';
  top: 100;
  left: 100;
  border: 1px solid grey;
  width: 20%;
  height: 7;
  transform-origin: 0% 0%;
  background-color: #808080;
}

我的Typescript React组件看起来像

import * as React from 'react'
import '../styles/style'

export class AnalogClock extends React.Component<AnalogClockProps, AnalogClockState> {
  constructor(props: AnalogClockProps) {
    super(props)
  }
  render() {
    let secondsTransform = {
      transform: 'rotate(' + ((this.props.currentTime.getSeconds() * 6) - 90).toString() + 'deg)'
    }
    let minuteAngle = (this.props.currentTime.getMinutes() * 6) + (this.props.currentTime.getSeconds() / 60)
    let minutesTransform = {
      transform: 'rotate(' + (minuteAngle - 90).toString() + 'deg)'
    }
    let hoursAngle = (this.props.currentTime.getHours() * 30) + (this.props.currentTime.getMinutes() / 2)
    let hoursTransform = {
      transform: 'rotate(' + (hoursAngle - 90).toString() + 'deg)'
    }    
    return (
      <div className="dial-style">
        <div className="second-hand-style" style={secondsTransform} />
        <div className="minute-hand-style" style={minutesTransform} />
        <div className="hour-hand-style" style={hoursTransform} />
      </div>
    )
  }
}

interface AnalogClockState {}
interface AnalogClockProps {
  currentTime: Date
}

import*作为来自“React”的React
导入“../styles/style”
导出类AnalogClock扩展React.Component

不管我在顶部、左侧、宽度和高度上做了什么。时钟指针的位置根本不会改变。它只是保持固定在屏幕顶部。我做错了什么？
您必须将单位添加到
宽度
、
高度
、
顶部
和
左侧
。我想您是在尝试使用像素，然后添加
px
：

top: 100px;

另外，
“相对的”
中没有引号：

position: relative;

你能分享一个工作代码吗？在你的CSS中有很多错误：亲戚不应该在
“
内下注，并且上/左/高应该有一个单位，如果你纠正CSS，它会很好，因为你需要单位。。。因为这是你的第三天，那么你可以阅读更多关于CSS和如何正确使用CSS的内容it@KnowsNotMuch正如Termani所说，移除
相对
周围的
，
，并在
高度
、
宽度
、
顶部
和
左侧
中添加一个单位“100”不是一个有效的单位，它是100%或100px。是的，当我删除那些单引号时，它立即起作用。