html - 为什么我不能将 top 和 left 设置为 $(window).width() * number

Question

在我的css文件中，我设置

#background_layer0{
   width: $(window).width();
   height: $(window).height();
}

它有效。但是，正如我设置的

#background_layer0{
   top: $(window).width() * 0.5;
   left: $(window).height() * 0.6;
}

它行不通。我看不出这两种属性之间有任何区别：
width , height和top left. 请纠正我的错误并解释原因。另外，希望大家可以给我一些阅读参考。

更新：我需要将网页部署到其他设备，例如：手机。如果我只使用百分比作为值，它可以工作吗？

Answer 1

使用单独的 JavaScript 文件或将其包含在脚本标记中

$('#background_layer0').css('top', function() {
    return $(window).width() * 0.5;
});

$('#background_layer0').css('left', function() {
    return $(window).height() * 0.6;
});

Answer 2

您可以简单地使用百分比：

#background_layer0{
width: 100%;
height: 100%;
}

#background_layer0{
top: 50%;
left: 60%;
}

Answer 3

所以，在 CSS 中，你不能使用$(window).height()and $(window).width()，你必须用百分比、像素等来指定它（它必须是绝对的）

要使对象的宽度与窗口的宽度和高度相同，您必须使用 javascript/jquery