javascript - css 属性未正确应用 [底部，右侧]

Question

我正在创建一个 div 并在 JavaScript 中然后将其推送到 Google Map 我附上一些 css 具有该 div 的属性 除了 1 个 bottom 属性外，所有属性都已应用 我指定了 15px 的值，但它显示 0px。任何想法我如何应用它。

演示是 here

这就是我创建 div

的方式

var unitControlDiv = document.createElement('div');
unitControlDiv.style.margin = '4px';
unitControlDiv.style.padding = '4px';
unitControlDiv.style.backgroundColor = 'ButtonShadow';
unitControlDiv.style.borderRadius = '10px';
unitControlDiv.style.bottom = '15px';
unitControlDiv.style.right = '10px';
unitControlDiv.className = 'unitContainer';

更新 1

以下是 map 加载后生成的css

我想将 bottom 和 right 从 0,320px 更改为 15px,10px分别为

Answer 1

问题是这一行:

map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(unitControlDiv);

这一行基本上是将您的底部 css 属性重置为“0px”，因为它将控件定位到底部。要解决此问题，您可以使用边距底部。

unitControlDiv.style.marginBottom = '50px';

Updated Demo

----更新------

那么你为什么不在 css 本身中覆盖它...

.unitContainer {
    margin:4px;
    padding:4px;
    background-color:ButtonShadow;
    border-radius:10px;
    bottom: 50px !important; /*Changed here*/
}