Arcgis API WebGIS开发CSS代码失效，网页运行后不能按照预设的样式显示

如图，红色框框是我留给legend小部件的位置,css代码如下：

#legend {
    position: absolute;
    left: 0;
    bottom: 0;
    overflow: auto;
    color: white;
    height: 400px;
    width: 200px;
    margin: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 100;
}

但是后面加载legend小部件的时候它不在预留给它的位置上了

它跑到上面去了，很奇怪，不知道出了什么问题。首先没加载legend小部件的时候这个div是按照css样式显示的，说明css应该没问题，我F12查看了一下

下面的框框是我写的css没问题，上面的是什么鬼，element.style {position：relative；}是啥。我写的是
position：absolute;来着，问题可能就出在这里，百度了一下。看到有博主写到，这是内联样式很多情况下是在一些第三方javascript代码里写死的。那这个锅应该是arcgis for javascript的问题了。
解决办法：
在css属性后面加 !important
修改原先的css

#legend {
    position: absolute !important;
    left: 0;
    bottom: 0;
    overflow: auto;
    color: white;
    height: 400px;
    width: 200px;
    margin: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 100;
}

然后看下效果：

这次留在了预定的位置没有动。
参考博客：
https://blog.csdn.net/chenguang79/article/details/46721971