CSS 惯用定位

?

1.居中兼容

.Untitled{

? ? position: absolute;

? ? width: 850px;

? ? height: 768px;

? ? margin-left:-425px;

? ? top:0px;

? ? left:50%;

? ? z-index: 999;

? ? filter: alpha(opacity=0);

? ? opacity:0/100;

? }

实现：红色标注就是实现4要素；

?

2.浮动层固定位

1.外包围法

?

?

html, body {

? ? ? height: 100%;

? ? ? overflow: auto;

? }

? .wrapper { ?//替代body为滚动条

? ? ? position: relative;

? ? ? width: 100%;

? ? ? height: 100%;

? ? ? overflow: auto;

? }

? .box {

? ? ? position: fixed;

? ? ? right: 20px;

? ? ? bottom: 80px;

? }

? html .box {

? ? ? position: absolute; ? ? ? ? ? ? ?//兼容IE

? }

?

<div class="wrapper">?

?</div>

?

<div class="box"><a href="#content" style="float:right;">返回顶部</a></div>

2.兼容法

?

#tbox{

width:47px; height:73px; float:right; position:fixed;

_position:absolute; ? ? //兼容IE6

_bottom:auto;?? ? //兼容IE6

_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));?? ? //兼容IE6

_margin-bottom:45px;?//兼容IE6

}

#gotop{

width:47px; height:47px; background:url(../common/static/images/top.png) no-repeat; position:absolute; top:0px; display:none; cursor:pointer

}

?

?

?

<!-- 代码开始 -->

?

<div id="tbox">

?

<!-- <a id="gotop" href="javascript:void(0)"></a> -->

<a id="gotop" href="#"></a>

?

</div>

?

?

<!-- 代码结束 -->

?

?3.expression简短版

.returnTop{

position:fixed;

left:50%;

bottom:115px;

*bottom:116px;

cursor:pointer;

background-color:#fcfcfc;

border:1px solid #cfcfcf;

_position:absolute;

_bottom:110px;

_top:expression(documentElement.scrollTop+documentElement.clientHeight - this.clientHeight-118+'px');

margin-left:482px;

width:64px;

height:64px;

background-image:url(http://img5.cache.netease.com/tie/images/return-top.png);

background-position:12px 20px;

background-repeat:no-repeat;

}

.returnTop:hover,.returnTop:active{background-position:12px -40px}

.returnTop a{display:block;width:64px;height:64px;text-indent:-9999em;overflow:hidden}

?

<div id="returnTop" class="returnTop" style="display: block; ">

<a href="javascript:;" class="js-statistics" statistics="action=click;value=returnTop;"><em></em>返回顶部</a>

</div>

?

效果在chrome如下：

1. position:?fixed;
2. left:?50%;
3. bottom:?115px;
4. display:?none;
5. cursor:?pointer;
6. background-color:?#FCFCFC;
7. border:?1px solid?#CFCFCF;
8. _position:?absolute;
9. _bottom:?110px;
10. _top:?expression(documentElement.scrollTop+documentElement.clientHeight - this.clientHeight-118+'px');
11. margin-left:?482px;
12. width:?64px;
13. height:?64px;
14. background-image:?url(http://img5.cache.netease.com/tie/images/return-top.png);
15. background-position:?12px 20px;
16. background-repeat:?no-repeat;