javascript - 如何使用 CSS 根据百分比定位 div

Question

我正在寻求有关根据百分比沿 X 和 Y 坐标定位对象的帮助，以便在您滚动页面时允许它移动到所有内容之上。这些数字是有效的，但 CSS 似乎很困惑，所以我需要的只是对齐帮助。

目前我有:

document.getElementById('block').style.display="style='position: absolute; left: place%; top: place%; transform: translate(place%, place%);'";

示例:办公应用程序在工具栏从工具栏支架上取下并坐在那里时四处移动工具栏

fiddle 是:http://jsfiddle.net/JFqus/

Answer 1

您正试图在一行中设置多个值，这是不可能的。

document.getElementById('block').style.position = "absolute";
document.getElementById('block').style.left = document.getElementById('block').style.top = "50%";
document.getElementById('block').style.transform = "translate(50%, 50%)";

http://jsfiddle.net/JFqus/2/

如果您只想一直应用样式，可以将其直接添加到 div 的样式属性中:

<div id="block" style="background-color:#000000;height:100px;width:100px;position: absolute; left: 50%; top: 50%; transform: translate(50%, 50%);"></div>

http://jsfiddle.net/ZazmC/

但这很丑陋，您应该将样式与标记分开:

#block {
    background-color: #000000;
    height: 100px;
    width: 100px;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(50%, 50%);
}

http://jsfiddle.net/ZazmC/1/

此外，我认为您需要position: fixed，而不是absolute。