downX 是相对容器的坐标，也就是说，我们需要减去容器的偏移量，这种情况会出现在使用了
margin 等参数，或者说上方或者左侧有别的元素的情况我们输出一下我们红色的元素的
offsetLeft 等属性，会发现他是已经本身就有50的偏移量了，我们计算鼠标点击的坐标的时候就要减去这一部分的偏移量
window.onload = function () {
const test = document.getElementById('test')
console.log(`offsetLeft: ${test.offsetLeft}, offsetHeight: ${test.offsetTop}`)
}html,
body {
margin: 0;
padding: 0;
}
#test {
width: 50px;
height: 50px;
margin-left: 50px;
background: red;
}
<div class="container">
<div id="test"></div>
</div>
注意父组件使用relative相对布局的情况
假如我们现在有一种这种的布局，打印红色元素的偏移量，看起来都挺正常的
但是如果我们目标元素的父元素（也就是黄色部分）设置
relative 相对布局
.wrap {
position: relative;
width: 400px;
height: 300px;
background: yellow;
}<div class="container">
<div class="sider"></div>
<div class="wrap">
<div id="test"></div>
</div>
</div>
这时候我们打印出来的偏移量会是多少呢
两次答案不一样啊，因为我们的偏移量是根据相对位置来计算的，如果父容器使用相对布局，则会影响我们子元素的偏移量
组件代码（低配版）
import React, { FC, ComponentType, useEffect, useRef, RefObject, useState, MutableRefObject } from 'react'
import { CustomBreadcrumb } from '@/admin/components'
import { RouteComponentProps } from 'react-router-dom';
import { FormComponentProps } from 'antd/lib/form';
import {
Slider, Radio, Button, Tooltip, Icon, Select, Spin, message, Popconfirm
} from 'antd';import './index.scss'
import { RadioChangeEvent } from 'antd/lib/radio';
import { getURLBase64 } from '@/admin/utils/getURLBase64'
const { Option, OptGroup } = Select;
type MarkPaperProps = RouteComponentProps & FormComponentProps
const MarkPaper: FC<MarkPaperProps> = (props: MarkPaperProps) => {
