DIV布局问题，请指出问题所在，提供修改意见

我这里有2个DIV，像让绘图的DIV工具显示在地图的左侧。
但是不管怎么操作，都会被地图覆盖。特此有偿请教。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>在线天地图服务</title>
    <script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=我的秘匙"></script>
    <script type="text/javascript" src="jsscty.js"></script>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #mapDiv {
            height: 100%;
            width: 100%;
            position:relative;
            z-index:100;
        }

        input {
            top: 100px;
            left: 35px;
            font-size: 14px;
            position:absolute;
            z-index:70;
        }
    </style>
</head>
<body onLoad="onLoad()">

<div class="input">
    <input type="button" value="点工具"  onClick='openMarkerTool() '/>
    <input type="button" value="多边形工具"  onClick='openPolygonTool() '/>
    <input type="button" value="线工具"  onClick='openPolylineTool() '/>
    <input type="button" value="矩形工具"  onClick='openRectangleTool() '/>
    <input type="button" value="画圆工具"  onClick='openCircleTool() '/>
    <input type="button" value="获取图层个数"  onClick='alert(getLayerCount()) '/>
    <input type="button" value="清除所有"  onClick='map.clearOverLays()'/>
</div>
<div id="mapDiv" class="mapDiv"></div>
</body>
</html>

可以将背景图的z-index调小，比如将mapDiv的z-index设置为10，将input的z-index设置为20。这样div就能够显示在背景图的上面了。修改后的CSS代码如下：

#mapDiv {
    height: 100%;
    width: 100%;
    position:relative;
    z-index: 10;
}
 
input {
    top: 100px;
    left: 35px;
    font-size: 14px;
    position:absolute;
    z-index: 20;
}

可以在CSS中修改.input的z-index值，将其提高到比地图的值更高的绝对位置

.input {
    position: absolute;
    top: 100px;
    left: 35px;
    z-index: 200; /* 修改为更高的层数 */
}

这样就可以将绘图工具置于地图之上，正常显示了。

你可以看下这个问题的回答https://ask.csdn.net/questions/7625299
这篇博客也不错, 你可以看下个人js学习实例-点击按钮实现按钮背景色变化以及相对应的div变化
除此之外, 这篇博客: 滚动到后，如何使div停留在屏幕顶部？中的 #2楼 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
You could use simply css, positioning your element as fixed : 您可以简单地使用css，将元素定位为fixed ：
```
.fixedElement {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}
```
Edit: You should have the element with position absolute, once the scroll offset has reached the element, it should be changed to fixed, and the top position should be set to zero. 编辑：您应该将元素的位置设为绝对，一旦滚动偏移量到达该元素，则应将其更改为fixed，并将顶部位置设置为零。
You can detect the top scroll offset of the document with the scrollTop function: 您可以使用scrollTop函数检测文档的顶部滚动偏移量：
```
$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});
```
When the scroll offset reached 200, the element will stick to the top of the browser window, because is placed as fixed. 当滚动偏移量达到200时，该元素将固定在浏览器窗口的顶部，因为它的位置固定。