<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE下的纯CSS完美position:fixed实现方案</title>
<style type="text/css">
html,body{margin:0px;height:100%;overflow:hidden;font-size:12px;}
/* 核心样式定义 */
.wrapper{
position:relative;
width:100%;
height:100%;
overflow:auto;
}
.fixed-box{
position:fixed;
}
* html .fixed-box{
position:absolute;
z-index:100;
}
/* 使用例子 */
#topBox, #leftBox, #bottomBox{
padding:5px;
border:1px solid #aaa;
background-color:#fee;
font-size:12px;
}
#topBox{
width:100%;
left:0px;
top:0px;
}
#leftBox{
width:150px;
left:50%;
top:150px;
margin:0 0 0 -200px;
}
#bottomBox{
width:100%;
left:0px;
bottom:0px;
}
</style>
</head>
<body>
<div class="wrapper">
<div style="height:2000px;">
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
</div>
</div>
<div id="topBox" class="fixed-box">
<p><b>固定在顶部</b></p>
<p>
该解决方案完美实现了 position:fixed 效果，完美支持 ie5.5+, firefox, opera, chrome等主流浏览器。
</p>
</div>
<div id="leftBox" class="fixed-box">
<p><b>固定中间某个位置</b></p>
<p>
该解决方案完美实现了 position:fixed 效果，完美支持 ie5.5+, firefox, opera, chrome等主流浏览器。
</p>
</div>
<div id="bottomBox" class="fixed-box">
<p><b>固定在底部</b></p>
<p>
该解决方案完美实现了 position:fixed 效果，完美支持 ie5.5+, firefox, opera, chrome等主流浏览器。
</p>
</div>
</body>
</html>
分享到：
相关推荐
NULL 博文链接：https://piziwang.iteye.com/blog/424862
NULL 博文链接：https://onestopweb.iteye.com/blog/2339092
position:fixed在ie6的使用，hack的使用办法
IE6的兼容性问题主要出现在position：fixed上面，如何解决已经在《【CSS】IE6中的position：fixed问题与随滚动条滚动的效果》（点击打开链接）介绍过了。 下面具体说说如何利用JavaScript中的滚动事件[removed]实现...
目前我所知的ie6下fixed的方案大概有纯css和expression+js两种，各有利弊。 1.纯css法 利用了ie6下html元素外面套的一个匿名元素，即 * ，利用选择器层级，可以定制ie6下的效果。代码如下 复制代码代码如下: * ...
及上下两边，共四种位置的固定，与以往的教程不同的地方是，它使用CSS表达式来兼容IE5、IE6，且避免了js模拟时，拖动滚动条时出现抖动的问题，另外在IE5或者怪癖模式下也完全正常，没有任何问题。如果你有更好的方案...
切入正题，以下的IE6下CSS的兼容性写法： 复制代码代码如下:/* 修正IE6振动bug */html,* html body{background-image:url(about:blank);background-attachment:fixed;}/* IE6 头部固定 */...
IE6 position:fixed bug</title> <style> *{padding:0;margin:0} p{height:2000px} #gs{border:1px solid #000;position:fixed;right:30px;top:120px} </style> <!–[if IE 6]>
NULL 博文链接：https://clfsw.iteye.com/blog/657170
一般我们会添加position:fixed，如下： 复制代码代码如下: #element{ position:fixed; margin:0 auto; } 但是这样做的结果就是，元素不居中了。这说明fixed使对象脱离了正常文档流。 解决方案： 复制代码代码...
谁知道呢）看 第三排给IE6以及更老的版本看 最好的应用就是可以让IE6也“支持”position:fixed，而且，配合这个原理，可以做到不引入JavaScript代码（仅用IE6的expression），我这里有一个现成的页面，CSS如下写： ...
position:sticky用法 position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的...
第一种方法：纯CSS 目前网上有的比较多的是这种解决方案（纯CSS）： 代码如下: html{overflow:hidden;} body{height:100%;overflow:auto;} #rightform form{position:absolute;right:30px;top50px;} 这个方法有一个...
注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。 Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。 relative 定位 相对定位元素的定位是相对其正常位置。 ...
此时对象不具有边距，但仍有补白和边框 relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 fixed : IE5.5及NS6尚不支持此属性 "对于页面中一个static的div#demo，我想让这个...
用css实现div固定在屏幕底部,不随垂直滚动条接动而闪动,很好的实现在ie下的浮动效果,IE6 position:fixed
复制代码代码如下: #fixed { position: absolute; top: 0; left: 0; width: 10em; height: 100%; } body > #fixed { position: fixed; } #content { margin-left: 10em; background:red; height:800px; } 利用css...
今天herb同学在twitter上问到，如何利用CSS使搜索条固定显示于窗口的某个位置。好像之前也碰过这个问题，不过，当时并没有解决，用JS有现成的方法，不过，这次要求的就是不用JS。