Chrome 中的绝对定位？

Question

它适用于 IE/FF，但不适用于 Chrome。

    html += '<div id = "note" style = "position: absolute; background-color:'
           + newcss[0] + '; margin-left:'
           + newcss[1] + '; margin-top:'
           + newcss[2] +  '; width = 100px; height = 100px;">'
           + newnote + '</div>';

基本上，我在页面中添加了一个新注释，具有随机颜色，以及从左侧和顶部的位置（存储在 newcss 中）。

IE 与 Chrome 的图片（左侧为 IE）：

https://i.sstatic.net/LFZhD.png< /a>

编辑：是的，这是一个错误； width: 和 height: 将其修复为实际上正确的大小，但它们仍然全部粘贴在栏下方的同一个位置，而不是随机空格

编辑2：我最初将它们作为单独的 id （我只是在乱搞jquery看东西哈哈）

Answer 1

给它 css

top: 0px;
left: 0px;
margin-top: newcss[2];
margin-left: newcss[1];
display: block;

或只是

top: 0px;
left: 0px;

Answer 2

CSS 不正确。 Css 样式规则的格式为 key:val;，而不是 key=vale。绝对定位允许您定义 top left bottom 和 right 值，并将对象放置在该位置（相对位置）到页面或包含元素（如果该元素设置了 position:relative ））。使用它们来放置绝对元素。

另外，您可能应该使用 DOM 对象而不是innerHTML。

var div = document.createElement('div');

div.setAttribute('class', 'note');

div.style.width = '100px';
div.style.height = '100px';
div.style.position = 'absolute';
div.style.backgroundColor = newcss[0];
div.style.top = newcss[1] + 'px';
div.style.left = newcss[2] + 'px';
container.appendChild(div);

更好的是，将永远不会改变的内容定义为样式规则，然后使用 Javascript 仅设置动态内容。

.note {
    position: absolute;
    width: 100px;
    height: 100px;
}

然后你所要做的就是设置 top left 和 background-color

div.setAttribute('class', 'note');
div.style.backgroundColor = newcss[0];
div.style.top = newcss[1] + 'px';
div.style.left = newcss[2] + 'px';
container.appendChild(div);

Answer 3

请尝试以下操作：

html += '<div class = "note" '
     + 'style="position: absolute; '
     + 'background-color:' + newcss[0] + '; '
     + 'left:' + newcss[1] + '; '
     + 'top:' + newcss[2] + '; '
     + 'width: 100px; height: 100px;">' + newnote + '</div>';

更改：

• 将 id 更改为 class；在一个文档中两个元素具有相同的 id 是无效的。
• 将 margin-left 和 margin-top 更改为 left 和 top。