css:fixed定位兼容不同系列不同版本的浏览器包括

建站知识 2021-07-03 08:43www.168986.cn长沙网站建设

现在很多门户网站页面内容庞大，都会往下拉很长，在以前我们想回顶部的时候要不断往上滚动鼠标的滚轮，直到滚到顶部为止，现在如果大家细心观察右下角是不是有一个点击回到顶部的按钮呢，对，今天我要说的就这个按钮的布局，闲话不多说，直接上代码，在代码中我尽量的标注css样式，以方便大家阅读；

复制代码

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://.w3./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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/
:200px; /距离右边200px/
_:expression(eval(document.documentElement.scrollTop+200)); /+200是IE6.0狼蚁网站SEO优化距离浏览器窗口顶部的位置/
/IE6.0狼蚁网站SEO优化距离底部位置为0px/
/_: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>

上一篇：css实现瀑布流空白处背景粉色背景块下一篇：div+css实现类似winxp桌面图标布局(至上而下从左往

css:fixed定位兼容不同系列不同版本的浏览器包括

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

css:fixed定位兼容不同系列不同版本的浏览器包括

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设