如何使用CSS定位基于百分比的div

-1

我正在寻找帮助定位沿X的对象和Y坐标以百分比为基准，以便在您滚动页面时允许它在所有内容上移动。数字工作，但CSS似乎困惑，所以我需要的是对齐的帮助。如何使用CSS定位基于百分比的div

目前我有：

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

例如：办公应用中移动工具栏时，他们折断工具栏架，而坐在那里

的小提琴是：http://jsfiddle.net/JFqus/

来源

2014-05-02 a coder

尝试'位置：静态的;'不是绝对 –

请在创建的jsfiddle此。这一行的JavaScript目前并不是非常有用。你只是在CSS中使用javascript，所以试着首先用好的CSS来实现它。 – sheriffderek

'display' style属性接受来自一组有限的可能值（'block'，'inline'等）的值。我的意思是，你写的东西在语法上不是正确的......甚至不是很接近。你从哪里拿走？ – MaxArt

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

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。

来源

2014-05-03 00:28:10 bjb568

如果我可以有机地做CSS，我会分开它。 –

使用element.style.cssText，例如：

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

的作品中，你可能左右照顾所有的浏览器：http://www.quirksmode.org/dom/w3c_css.html#t30

来源

2014-05-03 03:08:22

回答

相关问题