我一直在玩一个网站设计，它使用href =＆＃34;＆＃34;的区域映射。并且还有用于每个人的悬停的popovers我对我正在做的事情确实有问题但是有一种方法我可以将我的popovers保持在不同屏幕宽度的某个区域而不必对@media（）对于每种屏幕尺寸。
/ * HTML代码* /
<!-- Content -->
<!-- Landing Image -->
<div class="gridContainer clearfix">
<div class="col-lg-9">
<div class="fluid"><img src="images/pacificsharedservicesimage.png" alt="" usemap="#landingpagebuttons" class="img-responsive col-lg-offset-2 landingpageimage"></div>
</div>
<map name="landingpagebuttons">
<area id="recruitment" shape="circle" coords="276,99,61" href="home.html" data-toggle="popover" data-placement="left" data-container="body" title="popover test" data-content="phone:+61expamle ; email: example@example.com">
<area id="humanresources" shape="circle" coords="206,251,61" href="home.html" data-toggle="popover" data-placement="left" data-container="body" title="popover test2" data-content="phone:+61expamle ; email: example@example.com">
<area id="successionplanning" shape="circle" coords="276,406,61" href="home.html" data-toggle="popover" data-placement="left" data-container="body" title="popover test3" data-content="phone:+61expamle ; email: example@example.com">
<area id="payroll" shape="circle" coords="547,96,61" href="home.html" data-toggle="popover" data-placement="right" data-container="body" title="popover test4" data-content="phone:+61expamle ; email: example@example.com">
<area id="compensationandbenefits" shape="circle" coords="616,253,61" href="home.html" data-toggle="popover" data-placement="right" data-container="body" title="popover test5" data-content="phone:+61expamle ; email: example@example.com">
<area id="educationandlearning" shape="circle" coords="551,405,61" href="home.html" data-toggle="popover" data-placement="right" data-container="body" title="popover test6" data-content="phone:+61expamle ; email: example@example.com">
</map>
</div>
<!-- End Landing Image -->
<div class="gridContainer clearfix"><br></div>
<!-- Widgets -->
<div class="gridContainer clearfix">
<div class="col-lg-7">
<div class="fluid"><img id="socialmediaicons" class="img-responsive col-lg-offset-6" usemap="#widgets" src="images/socialmediaicons.png" alt=""></div>
</div>
</div>
<map name="widgets">
<area id="facebook" shape="circle" coords="67,59,36" href="https://www.facebook.com/Pacific-Shared-Services-645030438932875">
<area id="instagram" shape="circle" coords="158,57,36" href="https://www.instagram.com/pacific_shared_services">
<area id="linkedin" shape="circle" coords="251,58,36" href="https://www.linkedin.com/company/pacific-shared-services">
<area id="pinterest" shape="circle" coords="344,58,36" href="https://au.pinterest.com/PacificSS">
<area id="twitter" shape="circle" coords="436,58,36" href="https://twitter.com/PACIFIC_SS">
</map>
<!-- End Widgets -->
<br>
<!-- End Content -->
/ *结束HTML代码* /
/ * CSS代码* /
/* Home */
img.map, map area { outline: none; }
map { top:0; left:0; }
/* Popover Position */
#recruitment { border:1px solid #000; width: 20px; height:20px; position:absolute; top:525px; left:680px; }
#humanresources { border:1px solid #000; width: 20px; height:20px; position:absolute; top:680px; left:613px; }
#successionplanning { border:1px solid #000; width: 20px; height:20px; position:absolute; top:840px; left:680px; }
#payroll { border:1px solid #000; width: 20px; height:20px; position:absolute; top:525px; left:1128px; }
#compensationandbenefits { border:1px solid #000; width: 20px; height:20px; position:absolute; top:680px; left:1195px; }
#educationandlearning { border:1px solid #000; width: 20px; height:20px; position:absolute; top:840px; left:1128px; }
/* End Popover Position */
.landingpageimage { width:800px; }
/* End Home */
/ *结束CSS代码* /