CSS position属性中：fixed怎么用的-tutorial css-php.cn

CSS position属性中：fixed怎么用的

怪我咯

Lepaskan： 2017-06-22 10:16:31

asal

6806 orang telah melayarinya

osition属性规定元素的定位类型，即建立元素布局所用的定位机制。任何元素都可以定位，不过绝对定位或固定定位元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

position属性值除了默认的static外，还有relative、absolute、fixed，本文重点讨论fixed属性值。

一、position:fixed属性的含义

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

我们平时所说的固定定位指的就是fixed，设置了固定定位的元素不会随滚动条上下滚动。

二、一般的 position:fixed; 实现方法

#top{position:fixed;bottom:0;right:20px}实现了id为top的元素固定在浏览器的底部和距离右边20个像素的位置

#top{position:fixed;top:20px;right:20px}实现了id为top的元素固定在距离浏览器的顶部20个像素和距离右边20个像素的位置

三、IE6下position:fixed; 实现方法

在IE6中是不能直接使用 position:fixed; 。你需要一些 CSS Hack 来解决它

相同的还是让

...

元素固定在浏览器的底部和距离右边的20个像素，这次的代码是：

#top{position:fixed;bottom:0;right:20px;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}

Salin selepas log masuk

right 跟 left 属性可以用绝对定位的办法解决，而 top 跟 bottom 就需要用上面的表达式来实现。其中在_position:absolute; 中的 _ 符号只有 IE6 才能识别，目的是为了区分其他浏览器

1、使元素固定在浏览器窗口的顶部：

#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop));}

Salin selepas log masuk

2、使元素固定距浏览器窗口的顶部a像素的位置：

#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop));
_margin-top:a;
}

Salin selepas log masuk

或者

#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+a));
}

Salin selepas log masuk

3、使元素固定在浏览器窗口的底部：

#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}

Salin selepas log masuk

4、使元素固定在距浏览器窗口的底部b像素的位置：

#top{
_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
_margin-bottom:b;
}

Salin selepas log masuk

或者

#top{
_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||b)-(parseInt(this.currentStyle.marginBottom,10)||b)));
}

Salin selepas log masuk

Atas ialah kandungan terperinci CSS position属性中：fixed怎么用的. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!