如何使用CSS定位基于百分比的div [英] How do I positioning a div based upon percentages with CSS

问题描述

我正在寻找帮助，沿着X定位一个对象，并根据百分比定位Y坐标，以便当您在页面上滚动时允许它在所有内容上移动。数字正在工作，但CSS似乎困惑，所以我需要的是对齐帮助。

目前我有：

  document.getElementById（'block'）。style.display =style ='position：absolute; left：place％; top：place％; transform：translate（place ％，place％）;'; 
  

示例：办公应用程序在将工具栏从工具栏托架中弹出时围绕其移动工具栏， p>

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

解决方案

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

  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的style属性：

 < div id =blockstyle =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; 
位置：绝对; 
剩下：50％;顶部：50％; 
转换：翻译（50％，50％）; 
} 
  

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

另外，我想你想 position：fixed ，而不是绝对。

I'm looking for help with positioning an object along X, and Y coordinates based upon percentage in order to allow it to move on top of everything when you scroll around the page. The numbers are working, but the CSS seems to be confused, so all I need is alignment help.

Currently I have:

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

Example: office applications moving tool bars around when they snap off the toolbar holder, and sit there

The fiddle is: http://jsfiddle.net/JFqus/

解决方案

You are attempting to set multiple values in one line, this isn't possible.

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/

If you just want the styles to be applied all the time, you can add it right into the div's style attribute:

<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/

But this is ugly, you should separate styles from markup:

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

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

Also, I think you want position: fixed, not absolute.

这篇关于如何使用CSS定位基于百分比的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！