Jquery 使用.css（）和像素值设置left、top、width和height参数是可行的，但使用百分比值并不能'；T

在中，我正在画布div上绘制一个正方形，如下所示：

$(document).ready(function() {
    var canvas = $('#canvas');
    canvas.append('<div id="1"></div>');
    $('#1').addClass('ui-boxer')
                .css({ border: '1px solid white',
                       background: 'orange',
                       padding: '0.5em',
                       position: 'relative',
                       'z-index': 100,
                       left: 1, top: 1,
                       width: 50, height: 50});        
});

$（文档）.ready（函数（）{
var canvas=$（“#canvas”）；
canvas.append（“”）；
$（'#1'）.addClass（'ui-boxer'））
.css（{边框：“1px纯白”，
背景：“橙色”，
填充：“0.5em”，
位置：'相对'，
“z指数”：100，
左：1，上：1，
宽度：50，高度：50}）；
});

这个很好用。但是我需要使用百分比，而不是px值作为左、顶、宽和高参数，但它不起作用：

$(document).ready(function() {
    var canvas = $('#canvas');
    canvas.append('<div id="1"></div>');
    $('#1').addClass('ui-boxer')
                .css({ border: '1px solid white',
                       background: 'orange',
                       padding: '0.5em',
                       position: 'relative',
                       'z-index': 100,
                       left: 1%, top: 1%,
                       width: 50%, height: 50%});        
});

$（文档）.ready（函数（）{
var canvas=$（“#canvas”）；
canvas.append（“”）；
$（'#1'）.addClass（'ui-boxer'））
.css（{边框：“1px纯白”，
背景：“橙色”，
填充：“0.5em”，
位置：'相对'，
“z指数”：100，
左：1%，顶：1%，
宽度：50%，高度：50%）；
});

---

我做错了什么？感谢阅读。

它们需要是字符串：“1%”而不仅仅是1%。Javascript本身无法理解%符号

因此：

$（文档）.ready（函数（）{
var canvas=$（“#canvas”）；
canvas.append（“”）；
$（'#1'）.addClass（'ui-boxer'））
.css（{边框：“1px纯白”，
背景：“橙色”，
填充：“0.5em”，
位置：'相对'，
“z指数”：100，
左：“1%”，顶：“1%”，
宽度：“50%”，高度：“50%”）；
});

您需要引用百分比：

width: '50%'

width: '50%'