IE下的纯CSS完美position:fixed实现方案

淡风wisdon大大 2011-05-16 

<!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>
淡风wisdon大大

淡风wisdon大大

相关推荐

我用Python帮学校写了一款图书管理系统！教导员居然请我吃饭

话不多说，直接正文开始，话说才吃个饭是不是亏了，是不是又奖金没给我!returnf"书名：《{self.name}》，作者：<{self.author}>,状态：<{self.state}>,位置：<{self.bo

lcqin / 0评论 2020-08-11

左右切换css，html

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="

yaodilu / 0评论 2020-08-03

分享一个纯CSS写的钟表式计时器

width: 400px;height: 400px;border-radius: 50%;border: 3px solid black;margin: 200px auto;position: relative;width: 3px;height: 4

lanzhusiyu / 0评论 2020-07-18

jquery: carousel arrow click

实现原理：父元素为定宽定高相对定位，且overflow：hidden，子元素为绝对定位高度继承父元素，宽度可计算或设置一个大值，通过绝对定位的left来决定显示的子元素

小仙儿 / 0评论 2020-06-25

css 四个角

position:relative;padding:5px;height:50px;width:300px;position:absolute;content:‘‘;height:10px;width:10px;right:0;top:0;border-r

xiaohuli / 0评论 2020-06-11

LESS

输出为：* {margin: 1000px;padding: cacl;}

Enjoyendless / 0评论 2020-06-11

css实现波浪纹，水波纹动画

<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"

CaiKanXP / 0评论 2020-06-09

小程序 自定义二维码 canvas海报 canvas保存为本地图片

<image src=‘{{preurl}}‘ mode=‘widthFix‘ class=‘previewImg‘></image>. <button bindtap=‘save‘ class="themeBtn

songfens / 0评论 2020-06-08

CSS定位

元素的定位属性主要包括定位模式和边偏移两部分。静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。上面的话翻译成白话：就是网页中所有元素都默认的是静态定位哦！其实就是标准流的特性。在静态定位状态下，无法

CSSEIKOCS / 0评论 2020-05-19

苹果css

position:relative;/*9这样就可以设定top使得它向下移动,position的默认值是static*/. top:4px;/*下移一点点，需要回到上面把span的position设定为relative才会生效 10.1*/

aSuncat / 0评论 2020-05-10

深入理解CSS绝对定位

CSS中有3种定位机制：普通流，浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。顾名思义，普通流中元素框的位置由HTML元素的位置决定。块级框一个接一个地垂直排列，框之间的垂直距离由框的垂直外边距计算出。在本文中，我们主要讲解3种定位机制之一的绝

Phoebe的学习天地 / 0评论 2020-05-09

CSS - checkbox 样式

content:‘‘;position:absolute;top:8px;width:22px;height:22px;background:#fff;border:1pxsolid#e6e6e6;z-index:1;content:‘‘;position

nicepainkiller / 0评论 2020-05-05

kafka 吞吐量为什么这么大？

batch 发送，batch 存储，batch 拉取。kafka-consumer-groups.bat --bootstrap-server localhost:9092 --reset-offsets --execute --group zhang-w

amwayy / 0评论 2020-05-01

关于Css的定位的一些总结

参照物：往父级上找，如果找到了有定位的父级，就会以这个元素为 参照物，如果没有就会以body为参照物

wangjie / 0评论 2020-04-25

c（css 精灵）

简单来讲就是把多个icon（小图标），通过ps等工具合并为一张图片，从而达到减少http请求的次数，以提高网页加载速度（性能）的一种方式。

AlisaClass / 0评论 2020-04-14

css定位-position

定位模式仅仅定义了以哪种方式进行定位，并不能确定元素的具体位置，在css中，通过偏移属性来定义位置，其取值为数值或百分比。包含块是绝对定位的基础，包含块就是为定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；命名锚点的

coulder / 0评论 2020-04-08

css中position属性

position属性规定元素的定位类型。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。　　　　 fixed--固定定位，相

wangjie / 0评论 2020-02-26

CSS position定位

就比如在网页中的一些广告，无论你怎么滑动网页都无法隐藏掉广告，这就运用到我们强大的CSS定位。CSS定位的内容包括：position（位置）:relative（相对） / absolute（绝对）/static （默认）/sticky（粘性）/ fixed

xiaohuli / 0评论 2020-02-23

css面试题

定位位置为 left: 50%; 然后 margin-left: -50px; 向左偏移元素宽度的一半。跟上面方法差不多，用 transform: translateX; 代替 margin-left，这样就不需要知道元素的宽度了。弹性布局什么的最喜欢了。

福叔 / 0评论 2020-02-16

css的相对定位和绝对定位

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。使用 display 属性改变生成的框的类型。这样的话，该框

葉無聞 / 0评论 2020-02-03

python Selenium 相关参数配置

显式等待的代码定义了等待条件，只有该条件触发，才执行后续代码。下面代码最多等待 10 秒，超时后就抛出 TimeoutException。隐式等待是在尝试发现某个元素的时候，如果没能立刻发现，就等待固定长度的时间。默认设置是0秒。一旦设置了隐式等待时间，它

云之高水之远 / 0评论 2020-01-18

css - 水平垂直居中几种方式

position: absolute设置left、top、margin-left、margin-to(定高)；grid，兼容性相对比较差；

冰蝶 / 0评论 2020-01-10

css属性position

CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从

dazhifu / 0评论 2020-01-02

css基础第四节

1.块状元素转行内元素：display: inline;2.行内元素装块状元素：display: block;3.隐藏：display: none;4.行内块状元素，既有行内元素特性，也可以设置margin和宽高：display: inline-block

impress / 0评论 2020-01-07

web前端入门到实战：css绝对定位和相对定位、固定定位

绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不会占据空间。绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定为的元素没有已定位的祖先元素作为参考值，则相对于整个网页。并且即使该元素偏移

元元 / 0评论 2020-01-02

0016 CSS 背景：background

【插入图片，不用设置img元素的父元素、自身元素大小，即可见，但是背景图要设置元素的宽高才可见。background-repeat : repeat | no-repeat | repeat-x | repeat-y. position 后面是x坐标和y坐

MaureenChen / 0评论 2019-12-31

h5css3_03练习

创建index文件，新建css文件夹，创建base.css文件并初始化基本代码，新建images文件夹。2，排版基本的样式

福叔 / 0评论 2019-12-26

CSS position定位

　　注意：这里的子元素如果同时设置了浮动，要清除浮动

somboy / 0评论 2019-12-24

css画百分比圆环

border-radius: 44px 0 0 44px/44px 0 0 44px;border-radius: 50px 0 0 50px/50px 0 0 50px;当剩余量大于50%时左侧上叠加环形旋转角度不用变，只有计算右测上叠加环形旋转角度即可

zhanghao / 0评论 2019-12-20

redis geo操作

package club.newtech.qbike.trip.domain.service; import club.newtech.qbike.trip.domain.core.Status;import club.newtech.qbike.t

八角塘塘主 / 0评论 2019-12-23

css不同情况下的各种居中方法

margin: 0 auto ;display: flex;position: absolute;position : absolute;left : 50%;position: absolute;width : 宽度；margin: 0 auto;dis

jiedinghui / 0评论 2019-12-23

炫酷的CSS3响应式表单

margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;display: flex;justify-content: center;align-items

somboy / 0评论 2019-12-11

前端常用的css代码

position:absolute;top:50%;left:50%;position:absolute;top:50%;left:50%;width:100px;height:100px;margin:-50px 0 -50px;position:fix

zengni / 0评论 2019-12-07

ios开发之设备前后摄像头切换

// beginConfiguration ensures that pending changes are not applied immediately

Bigheart / 0评论 2013-07-20

[CSS] 伪元素after和属性position:absolute以及display:block之间的关系

为什么after伪元素之后content无法应用高度和宽度？显示范围只有“12”这部分，而没有50px * 50px的框。因为after之后的元素默认display为inline，所以无法响应width和height属性。之前的内容应该是block。inl

hlfsunshine / 0评论 2013-09-02

如何使用 css3 transform 属性来变换背景图

使用 css3 transform 属性可以轻易的旋转，倾斜，缩放任何元素。目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用。这个听起来很赞。目前 W3C 没有关于如何旋转背景图的提案。幸运的是，我们找到一个解决方式。这个元素可以使用任何样式，但一定

AlisaClass / 0评论 2019-11-18

CSS 实现隐藏滚动条同时又可以滚动内容

ok，有了以上的代码就可以轻松的实现效果啦！

NARUTOLUOLUO / 0评论 2019-11-17

css定位瞄点透明相关知识

position 定位属性，检索对象的定位方式；当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。

CaiKanXP / 0评论 2019-11-09

使用Sass预定义一些常用的样式，非常方便

CoderChang / 0评论 2014-06-04

JQuery Ajax 遮罩效果

this.unmask();opacity: 0.8,z: 10000,};var original=$(document.body);var position={top:0,left:0};if(this[0] && this[0]!==

88570299 / 0评论 2014-05-29

详解css3如何给背景图片加颜色遮罩

前段时间在开发中，遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法。web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法

jiedinghui / 0评论 2019-11-06

Python 面向对象编程OOP (五) 写类神器：Dataclass

大家好，上一期受到了朋友的启发，这一期我主要记录一下我的Dataclasses的学习过程。之前简单回顾了attrs的用法，这一期来看更简洁的自带写类神器：dataclasses，需要注意，版本要大于等于Python 3.7. 可以发现，主要起作用的是装饰符

mayflowers / 0评论 2019-11-05

纯css实现开关效果

我们使用<input type="checkbox">标签来实现这个效果。checkbox的选中、未选中的特性，刚好对应开关的打开、关闭on:打开 off:关闭。这里要讲解一下，使用了position来实现的定位。有不了解的

impress / 0评论 2019-11-05

css position属性为absolute时，其百分值的计算

当position为absolue时候，其相关属性的百分比是相对它参考的元素（包含块）来进行计算并进行位置渲染的 。如果包含块的 height 值会根据它的内容变化，而且包含块的 position 属性的值被赋予 relative 或 static ，那么

liboqiao / 0评论 2019-11-04

Python基础面向对象的基本概念

Python使用类和对象，进行面向对象的编程。面向对象的最主要目的是提高程序的重复使用性。我们这么早切入面向对象编程的原因是，Python的整个概念是基于对象的。了解OOP是进一步学习Python的关键。下面是对面向对象的一种理解，基于分类。在人类认知中，

Kwong / 0评论 2019-11-03

jQuery中的CSS（五）

jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀，比如; 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用&qu

zengni / 0评论 2019-11-02

jQuery实现的页面弹幕效果【测试可用】

本文实例讲述了jQuery实现的页面弹幕效果。分享给大家供大家参考，具体如下：

huzipiaoyiba / 0评论 2018-08-17

Android 列表(ListView、RecyclerView)不断刷新最佳实践

本文微信公众号「AndroidTraveler」首发。在 Android 列表开发过程中，有时候我们的 Item 会有一些组件，比如倒计时。这类组件要求不断刷新，这个时候由于列表复用的机制，因此会有一些坑。那么我们本篇文章就给大家讲两个主题。第一个是列表复

magic00 / 0评论 2019-10-21

WebGL简易教程(十一)：纹理

‘ gl_Position = u_MvpMatrix * a_Position;\n‘ + // 设置顶点坐标。var currentAngle = [0.0, 0.0]; // 绕X轴Y轴的旋转角度

TWaver可视化 / 0评论 2019-10-19

JQuery操作标签

offset() // .offset()方法允许我们检索一个元素相对于文档的当前位置。scrollTop() // .position()的差别在于： .position()是相对于相对于父级元素的位移。

81463166 / 0评论 2019-10-19