Question

我正在寻找帮助，根据百分比定位对象和Y坐标，以便在您滚动页面时让它在所有内容之上移动。这些数字是有效的，但CSS似乎很混乱，所以我需要的是对齐帮助。

目前我有：

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

示例：办公室应用程序在他们从工具栏支架上取下工具时移动工具栏，然后坐在那里

小提琴是：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。

Answer 2

使用element.style.cssText，例如：

document.getElementById('block').style.cssText = 'position: absolute; /* ... */';

适用于您可能关注的所有浏览器：http://www.quirksmode.org/dom/w3c_css.html#t30

如何根据CSS的百分比来定位div

2 个答案: