全国服务热线:4008-888-888

行业新闻

css position:fixed;固定不动原素部位(fixed)

大家常常遇到的要求是期待网页页面某一原素固定不动在访问器的一个部位,不管怎样翻转翻转条,部位不会改变,就比如常常见到的弹出来广告宣传。方式通常为应用js操纵,或是应用css。这儿我写的是css的操纵方式。 在IE7之上版本号及firefox、opera、safari里,都适用css特性position:fixed,

css position:fixed;固定不动原素部位(fixed)

大家常常遇到的要求是期待网页页面某一原素固定不动在访问器的一个部位,不管怎样翻转翻转条,部位不会改变,就比如常常见到的弹出来广告宣传。方式通常为应用js操纵,或是应用css。这儿我写的是css的操纵方式。

在IE7之上版本号及firefox、opera、safari里,都适用css特性 position:fixed ,它的功效便是将原素相对性于对话框固定不动部位。编码以下

#ads{

  position:fixed;

  right:0;

  bottom:0;

  border:1px solid red;

  width:300px;

  height:250px;

}

大家界定一个#ads的id款式,并给他们设了高宽比总宽,根据position:fixed及其right、bottom将原素精准定位在对话框右下方。

可是在IE6下,其实不适用position:fixed特性,这一情况下大家必须对IE6开展hack解决。处理的计划方案是应用postion:absolute特性,它的功效大伙儿都很了解,相对性于父原素开展肯定精准定位,随后大家能够根据expression来更改#ads的top值。

PS expression的界定:IE5以及之后版本号适用在CSS中应用expression,用于把CSS特性和Javas cript表述式关系起來,这儿的CSS特性能够是原素原有的特性,还可以是自定特性。便是说CSS特性后边能够是一段Javas cript表述式,CSS特性的值相当于Javas cript表述式测算的結果。 在表述式中能够立即引入原素本身的特性和方式,还可以应用别的访问器目标。这一表述式就行好像在这里个原素的一个组员涵数中一样。

因此大家能够根据在css里测算javascript值来更改top值,编码以下:

#ads{

  _position:absolute;

  _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);

}

好像一切都极致了,可是大家在IE6下运作的情况下会发觉,伴随着翻转条的移动,大家的这一#ads朋友他会颤动。处理方式也非常简单,要是在body中放一点点的css,以下:

body{

  background-image:url(about:blank); /* for IE6 */

  background-attachment:fixed; /*务必*/

}

好了,竣工!!!!!!!!!!!!!!!!!!!!!!!!

有没有!!!!!!!!!!!!!!!!!!!!!!!!

PS:本来应用的是 url(text.txt) ,可是txt这一不是存有的,http恳求报404不正确,造成危害载入速率,参照了在网上的一些书写,应用about:blank能够做到同样目地。

基本原理听说是ie6不兼容fixed 而其款式情况却适用fixed,根据情况来此消彼长清除颤动,望大神赐教。

详细的编码:

body{

  background-image:url(about:blank); /* for IE6 */

  background-attachment:fixed; /*务必*/

}

#ads{

  width:300px;

  height:250px;

  position:fixed;

  right:0;

  bottom:0;

  _position:absolute;

  _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);

  border:1px solid red;

} 共享到:
文中"css position:fixed;固定不动原素部位(fixed)"由远航网站站长搜集梳理而成,仅作大伙儿学习培训与参照应用。大量网站建设实例教程尽在远航网站站长站。


在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服