当一个元素被 fixed 定位时,它会脱离文档流而以视窗为参考对象重新定位,但是当 left,top
不设置时,会出现奇怪的现象,尚没找到解释源。
absolute 定位
设置定位前:
设置absolute定位后:
但是不设置left,top则会:
效果表现为仅仅是脱离文档流
fixed 定位
fix 定位就比较奇怪了,若不设置 left,top,则浏览器实际上将当前元素未定位前的 document offset 设置为元素的left,top ,标准浏览器可通过计算值获取
,ie 可用 offsetTop,offsetLeft
间接获取。
那么如果当前定位元素所在视窗没有滚屏,则位置不变(以后随屏幕滚动):
定位前:
定位后
不设置left,top
实际上这时固定定位元素的top已经被设置为当前定位元素的 document offset,但因目前视窗没有滚动,所以和绝对定位时静态表现一致。
但是如果当前元素所在视窗有很大滚动值,则定位后,该元素会因 document offse t过大,并且相对视窗定位而被定位到了屏幕外边而导致不可见,这一点可以通过可以获得元素所在视窗位置的 getBoundingClientRect
( msdn
)清楚知道 :
getBoundingClientRect & css demo
- 大小: 1.2 KB
- 大小: 1.3 KB
- 大小: 3.6 KB
- 大小: 2.5 KB
分享到:
相关推荐
非IE6下的写法大家一般都清楚如何写;这里就不展示了;切入正题,以下的IE6下CSS的兼容性写法: ...bottom:auto;top:[removed]eval(document.documentElement.scrollTop));}/* IE6 右侧固定 */html .fixed-r
可是要在IE6中实现固定效果,position: fixed;就不奏效了。...}/*只是定制垂直滚动fixed*/ * html body{ overflow-y: auto; height: 100%;} * html #fixedbox{ /*把要固定的元素position设置为absolute *
复制代码代码如下: div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px; } 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即可 如果只需要上下居中,那么把...
定位方面,除了不支持fixed的ie6用absolute,其他都使用fixed定位。 【克隆tr】 table有一个rows集合,包括了table的所有tr(包括thead和tfoot里面的)。 程序的Clone方法会根据其参数克隆对应索引的tr: this._...
定位元素:position属性值设置除默认值static以外的元素,包括relative,absolute,fixed。平台:win/IE win/FF z-index 用来确定定位元素在垂直于显示屏方向(以下称为Z轴)上的层叠顺序 值:auto | 整数 | inherit...
上次【JS-实现导航栏悬停】说到,导航栏悬停的那个页面在IE上运行的时候,会出导航栏不停的抖动问题。解决方法如下: 将导航栏的定位... 因为fixed定位是根据浏览器的可视区进行定位的,所以原来给导航栏的定位都得改变
1.关于background的背景图片 的 fixed固定定位 Firefox是支持background:fixed;定位的,IE6只能说是半支持,好吧,这么说吧,可能不太严谨,就是背景图片固定的效果似乎只在根结点起作用。举个很简单的例子: 先看这...
复制代码代码如下:div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px; } 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即可 如果只需要上下居中,那么把 ...
用法:position:static(默认) | fixed | relative | absolute static 遵守正常的文档流,不设置top,bottom,left,right值。 fixed 脱离正常的文档流,完全以浏览器窗口为参照物,不随鼠标的滚动而滚动。设定...
·fixed(老的IE不支持):绝对定位,相对于浏览器窗口或frame进行定位 ·static:默认值。无定位,元素出现在正常流中 ·sticky:生成粘性定位的元素,容器的位置根据正常文档流计算得出 ·图层定位:z-index必须与...
值: auto | 整数 | inherit默认: auto适用于: 定位元素继承性: no 理解stacking context 每个box都归属于一个stacking context,它是元素在z轴方向上定位的参考。根元素形成 root stack
'position' : 'fixed', //定位方式 'animateType' : 'scale', 'modal' : false, //是否存在蒙层 'isModalClose' : false, //点击蒙层是否关闭 'bodyScroll' : false, //是否关闭body的滚动条 'closeTime' : ...
'position' : 'fixed', //定位方式 'animateType' : 'scale', 'modal' : false, //是否存在蒙层 'isModalClose' : false, //点击蒙层是否关闭 'bodyScroll' : false, //是否关闭body的滚动条 'closeTime' : ...
'position' : 'fixed', //定位方式 'animateType' : 'scale', 'modal' : false, //是否存在蒙层 'isModalClose' : false, //点击蒙层是否关闭 'bodyScroll' : false, //是否关闭body的滚动条 'closeTime' : ...
用来剪裁绝对定位元素(absolute or fixed)。 clip有三种取值:auto |inherit|rect。inherit是继承,ie不支持这个属性, auto是默认 前两个基本属于打酱油的,我们主要来说一下clip的rect属性。 clip的rect属性 : ...
当时我写错了,我一时想不起改用什么办法首行首列固定,用绝对定位,父亲相对定位…这样会有很多问题要解决… 所以回来我学了一下,以前教程没学过这些属性,涨知识了哈哈… 先了解几个概念: table-layout: table-...
CSS中的clip-path能够让你... /* 需要 absolute 和 fixed 定位 */ clip: rect(110px, 160px, 170px, 60px); /* 或 "auto" */ /* 值描述的是一个 top/left 点和一个 bottom/right 点 */
问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) 常用的样式属性...
详细解释 :默认情况为绝对定位,至支持true和false属性 6 showTime: 属性名称:展示时间, 默认值:null ; 详细解释 :展示时间,默认情况为一直展示不关闭,单位毫秒, 7 content: 属性名称:内容, ...