CSSposition属性中：fixed怎么用的

来源：懂视网责编：小采时间：2020-11-27 18:50:56

CSSposition属性中：fixed怎么用的

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

推荐度：

点击下载本文 文档为doc格式

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

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 来解决它

相同的还是让 <div id="top">...</div> 元素固定在浏览器的底部和距离右边的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)));
}

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

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

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

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

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

或者

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

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)));
}

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;
}

或者

#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)));
}

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

CSSposition属性中：fixed怎么用的

推荐度：

点击下载本文 文档为doc格式

标签：怎么用使用用的

热门焦点

CSSposition属性中：fixed怎么用的

CSSposition属性中：fixed怎么用的

CSSposition属性中：fixed怎么用的

最新推荐

猜你喜欢

热门推荐