首页 > 代码库 > 上下左右固定特效
上下左右固定特效
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>position: fixed</title><style type="text/css">* {padding: 0;margin: 0;}#content {height: 5000px;width: 50%;border-right: 10px dotted red;}#demo_t, #demo_b, #demo_l, #demo_r {background: #f90;position: fixed;}#demo_t, #demo_b {left: 0;width: 100%;}#demo_l, #demo_r {width: 50px;top: 300px;}#demo_t {top: 0;}#demo_b {bottom: 0;}#demo_l {left: 0;}#demo_r {right: 0;}</style><!--[if lte IE 6]><style type="text/css">html {/*这个可以让IE6下滚动时无抖动*/background: url(about:black) no-repeat fixed}#demo_t, #demo_b, #demo_l, #demo_r {position: absolute;}#demo_t, #demo_b {/*这个解决body有padding时，IE6下100%不能铺满的问题*/width: expression(offsetParent.clientWidth);}/*下面三组规则用于IE6下top计算*/#demo_l, #demo_r {top: expression(offsetParent.scrollTop + 300);}#demo_t {top: expression(offsetParent.scrollTop);}#demo_b {top: expression(offsetParent.scrollTop + offsetParent.clientHeight-offsetHeight);}</style><![endif]--></head><body><div id="demo_t">此处显示 id "demo" 的内容</div><div id="demo_b">此处显示 id "demo" 的内容</div><div id="demo_l">此处显示 id "demo" 的内容</div><div id="demo_r">此处显示 id "demo" 的内容</div><div id="content"></div></body></html>
上下左右固定特效
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。