css属性不适用[bottom，right]

Question

我创建了一个div并在JavaScript中，然后将其推送到Google Map我附加了一些css属性div所有属性都已应用除了bottom的1个属性，我指定的值为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

以下是地图加载后生成的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*/
}

Answer 2

  

bottom是与position相关的style属性。你可以申报    位置：绝对 或相对，然后只有底部才有效   否则它将无法正常工作

unitControlDiv.style.marginBottom = '15px';