网页导航定位的实现

为什么80%的码农都做不了架构师？>>>   

为了提高用户体验，现在的大部分网站都会在右侧添加回到顶部，反馈或者导航功能的链接，如：

百度新闻右侧

         

京东

那这些元素的定位是如何实现的呢？

其实很简单，以百度新闻的CSS样式为例：

#goTop {
    position: fixed;
    width: 54px;
    left: 50%;
    margin-left: 502px;
    bottom: 20px;
    _position: absolute;
    _top: expression(eval(document.documentElement.scrollTop || document.body.scrollTop) +eval(document.documentElement.clientHeight || document.body.clientHeight) -305+'px');
    z-index: 998;
}

定位的原理主要是：

使用left：50%使元素左侧居中显示，然后设置左边距margin-left为主体div元素宽度的一半，即可实现贴着主体内容区定位。

当然定位的方式不止一种，上面的方式为设置left和bottom属性，也有网站使用bottom及right属性的，开源中国首页的回到顶部就是之一。

以上两种方法皆可，但我更换第一种，因为在浏览器变窄时，第二种会浮动在内容区之上，影响美观。

转载于:https://my.oschina.net/benwen/blog/368294