如何使用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

回答

相關問題