css:fixed精准定位适配不一样系列不一样版本号的

2021-01-20 11:55 jianzhan
如今许多门户网网站网页页面內容巨大,都会拉下去很长, 在之前大家想回顶部的情况下要持续往上翻转电脑鼠标的滚轮,直至滚到顶部为止,如今假如大伙儿仔细观查右下角是否有1个点一下返回顶部的按钮呢,对, 今日我要说的就这个按钮的合理布局,闲话很少说,立即上编码,在编码中我尽可能的标明css款式,以便捷大伙儿阅读文章;

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF⑻" />
<title>fixed精准定位,处理IE6闪烁难题</title>
<style type="text/css">
*html{
background-image:url(about:blank);
background-attachment:fixed;
}/*此编码处理IE6.0下不容易出現闪烁*/
.backgroundBox {
border:1px solid orange;
width:100px;
height:2000px;
}
.fixedBox {
border:1px solid red;
width:100px;
height:100px;
position:fixed; /*适用完成w3c规范的访问器*/
_position:absolute; /*独立对于IE6*/
left:200px; /*间距顶部200px*/
top:200px; /*间距右侧200px*/
_top:expression(eval(document.documentElement.scrollTop+200)); /*+200是IE6.0下面间距访问器对话框顶部的部位*/
/*IE6.0下面间距底位置置为0px*/
/*_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));*/
}
</style>
</head>
<body>
<div class="backgroundBox"></div>
<div class="fixedBox">fixed box</div>
</body>
</html>