Question

我尝试修复响应 div位置： HTML是：

<div id="response">
<table width="100%" cellspacing="5" style="background-image:url(images/bg.gif); background-repeat:no-repeat; width:100%;">
    <tr>
        <td class="clock" colspan="2"><?php include'scripts/clock.html'; ?></td>
    </tr>
</table>
</div>
<div>
<img src="images/map.gif" border="0" usemap="#Msj_Map" alt="map" class="map" />
<map name="Msj_Map" id="Msj_Map">   
    <area id="8" shape="poly" coords="436,141,486,141,486,207,436,206" />
    <area id="1" shape="poly" coords="163,148,163,170,159,170" />
    <area id="2" shape="poly" coords="163,207,153,207,159,173,163,173" />
    <area id="189" shape="poly" coords="198,281,199,307,161,307,161,282" />
    <area id="190" shape="poly" coords="198,309,199,333,161,334,161,309" />
    <area id="165" shape="poly" coords="540,230,570,230,577,236,577,271,540,271" />
    <area id="40" shape="poly" coords="384,1156,419,1156,419,1180,383,1180" />
    <area id="39" shape="poly" coords="422,1156,458,1156,458,1180,422,1181" />
    <area id="54" shape="poly" coords="321,1109,353,1109,359,1116,360,1159,321,1159" />
    <area id="29" shape="poly" coords="356,1235,387,1235,387,1274,356,1274" />
    <area id="22" shape="poly" coords="390,1277,457,1277,457,1311,453,1315,390,1315" />
    <area id="23" shape="poly" coords="321,1277,387,1277,387,1315,321,1315" />
    <area id="24" shape="poly" coords="319,1277,319,1316,252,1316,252,1277" />
</map>
</div>

赞http://www.noobcube.com/wp-content/uploads/demos/062709-fixed-header-footer/demo/ 我使用了它的逻辑，但在实现过程中，我发现<map>标记与其他元素不起作用，因为<map>只是在图像上绘制，因此不支持overflow:scroll。但是<map>是我代码中的关键元素。

可能还有其他一些解决办法。

Answer 1

经过长时间的努力，我抓住 z-index 并为响应和<map> div创建css：

.calculator{
    z-index:1000;
    position:fixed;
    top:0px;
}
.map-wrap{
    margin-top:350px;
}

<div id="response" class="calculator">
<table width="100%" cellspacing="5" style="background-image:url(images/bg.gif); background-repeat:no-repeat; width:100%;">
    <tr>
        <td class="clock" colspan="2"><?php include'scripts/clock.html'; ?></td>
    </tr>
</table>
</div>
<div class="map-wrap">
<img src="images/map.gif" border="0" usemap="#Msj_Map" alt="map" class="map" />
<map name="Msj_Map" id="Msj_Map">   
    <area id="8" shape="poly" coords="436,141,486,141,486,207,436,206" />
    <area id="1" shape="poly" coords="163,148,163,170,159,170" />
    <area id="2" shape="poly" coords="163,207,153,207,159,173,163,173" />
    <area id="189" shape="poly" coords="198,281,199,307,161,307,161,282" />
    <area id="190" shape="poly" coords="198,309,199,333,161,334,161,309" />
    <area id="165" shape="poly" coords="540,230,570,230,577,236,577,271,540,271" />
    <area id="40" shape="poly" coords="384,1156,419,1156,419,1180,383,1180" />
    <area id="39" shape="poly" coords="422,1156,458,1156,458,1180,422,1181" />
    <area id="54" shape="poly" coords="321,1109,353,1109,359,1116,360,1159,321,1159" />
    <area id="29" shape="poly" coords="356,1235,387,1235,387,1274,356,1274" />
    <area id="22" shape="poly" coords="390,1277,457,1277,457,1311,453,1315,390,1315" />
    <area id="23" shape="poly" coords="321,1277,387,1277,387,1315,321,1315" />
    <area id="24" shape="poly" coords="319,1277,319,1316,252,1316,252,1277" />
</map>
</div>

并摆脱它。：）

谢谢大家。

Answer 2

围绕<img>和<map>包裹div。像这样：

<div class="map-wrap">
<img ... >
<map>
...
</map>
</div>

并添加css：

.map-wrap {position:relative;}

对于其他2个答案，<map>无法替换<div>

<map>标记用于定义图像映射。哪个图像分为可点击区域或鼠标敏感区域。

Answer 3

最好使用<div>代替<map>。在CSS中告诉<div>必须有一个固定的位置，一切都应该正常。

CSS：修复div位置

3 个答案: