绘制坐标问题，top:0;left:0;在画布中间？

[F5F5]

绘制的时候，只有第一个元素的top:0;left:0;在左上角，后面都是从画布中间开始绘制的，请问这是什么原因呀？没有使用相对布局

const width = 375;
const height = 480;
let newViews = [
      {
        type: "image",
        url: filePath,
        css: {
          left: "0px",
          top: "0px",
          width: width + "px",
          height: height + "px",
        },
      },
      {
        type: 'text',
        text: '我是水印我是水印',
        css: {
          left: `-${width / 3}px`,
          top: `-${height / 3}px`,
          width: '200px',
          height: '20px',
          fontSize: '14px',
          rotate: '-30',
          color: 'rgba(255,255,255,.8)',
        }
      },
      {
        type: 'text',
        text: '我是水印我是水印',
        css: {
          left: '-30px',
          top: '50px',
          fontSize: '14px',
          width: '200px',
          height: '20px',
          rotate: '-30',
          color: 'rgba(255,255,255,.8)',
        }
      },
      {
        type: "rect",
        css: {
          left: "0px",
          top: "0px",
          width: width + "px",
          height: 104 + "px",
          color: "rgba(0, 0, 0, 0.6)",
        },
      },
      {
        type: 'qrcode',
        content: '哈哈，笑死人了',
        css: {
          left: '0',
          top: '0',
          width: '64px',
          height: '64px',
          background: '#fff',
          borderWidth: '1px',
          borderColor: '#fff'
        }
      },
    ];

    this.setState({
        config: {
          ...this.state.config,
          width: width + "px",
          height: height+ "px",
          views: newViews,
        },
      }}

效果：