书签栏会影响div的定位位置怎么办?

<body>
    <div id=wrap>
        <div class="map">
             <div class=A1><a href="#">1<span class=C1>return of</span></a></div>
             <div class=A2><a href="#">2<span class=C2>the king</span></a></div>
        </div>
    </div>
</body>

/*wrap是底层.map是背景图,A1,A2是定位在map里面的小div*/

*
{
    font-size: 12px;
    margin: 0;
    padding: 0;
}
#wrap
{
    margin: 0 auto;
}
.map
{
    position: relative;
    float: left;
    background: url(../images/ROTK.jpg) no-repeat;
    -webkit-background-size: cover;
    -webkit-background-size: 100% 100%;
            background-size: cover;
            background-size: 100% 100%;
}
a{
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid #fff;
    -webkit-border-radius: 23px;
       -moz-border-radius: 23px;
            border-radius: 23px;
    background-color: #ff8000;
}
.A1 a:link
{
    margin: 16.6% 0 0 4.78%;
}
.A2 a:link
{
    margin: 5.7% 0 0 20.2%;
}
.A3 a:link
{
    margin: 12.2% 0 0 17.8%;
}

这是样式.用百分比定的位

$(window).load(function() {
    $('#wrap').height($(window).height());
    $('#wrap').width($(window).width());
    $('.map').height($(window).height());
    $('.map').width($(window).width());
});

这是js...效果是通过js获取当前页面高度和宽度,让图片充满浏览器.

但是发现当浏览器地址栏下面有书签栏之类的东西会把背景map的图片高度压缩,导致内部定位的div A1,A2等相对于图片向下偏移

请观察下图"love""左边字上面的圆点位置,没有书签时在字的上方,出现书签时位置偏下盖住了字

尝试过写成像素px来定位一样会往下.也试了试新见到的 transform: translate属性还是一样

我试着用offset..不过jQuery没有取到值还是怎么回事,背景图空白了.而且小div位置还是会变

请问如何解决,谢谢

qq_见过雪_0

浏览 2272回答 1

1回答

一毛钱

用offsetHeight 和offsetWidth 你用height和wight他是相对于屏幕的，给你一张图解释一下这个图片是借用别人的

1 0

随时随地看视频慕课网APP