实现两个div重叠的效果

发布网友 发布时间：2022-04-28 17:26

我来回答

共3个回答

热心网友 时间：2022-06-20 23:24

我先给你介绍下原理，首先要设置一个底层 也就是地图层 设置为相对定位，然后设置一个导航层，也就是方向盘，让这个层在地图层的内部，设置为绝对定位，离上有个距离 左有个距离。
实现代码
<div style="position:relative; width:500px; height:500px; z-index:1;">
我是地图层
<div style="position:absolute; left:20px; top:20px; width:100px; height:400px; z-index:2">我是方向盘</div>
</div>

<div id="obj" style="position:relative;z-index:1;width:100%;height:99%;">
<div id="search_suggest" style="position:absolute;z-index:2;" > <img src="images/yoyo.jpg">

<OBJECT WIDTH=100% HEIGHT=100% id="myMap" CLASSID="CLSID:62789780-B744-11D0-986B-00609731A21D"
codebase="<%=application("mgcodebase")%>" onMouseMove="if(mapok && !myMap.isBusy()){shownowXY(event.offsetX,myMap.clientWidth,event.offsetY,myMap.clientHeight);}">
这里是一些设定 省略。。。。。
</OBJECT>

</div>

</div>

热心网友 时间：2022-06-20 23:25

<div style="width:400px; height:400px; background:#F00;"></div>
<div style="width:100px; height:100px; background:#000; position:relative; top:-400px;"></div>

热心网友 时间：2022-06-20 23:25

<div style='background-color:yellow; height:400;width:400;' >
<div style="background-color:Red; height:100; width:100; position:absolute">

</div>
</div>

效果图 具体自己修改