通过设置CSS中的position属性来固定层的位置


Posted in Javascript onDecember 14, 2015

定义和用法

position 属性规定元素的定位类型。

说明

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

默认值: static
继承性: no
版本: CSS2
JavaScript 语法: object.style.position="absolute"

实例

定位 h2 元素:

h2
 {
 position:absolute;
 left:100px;
 top:150px;
 }
TIY

浏览器支持

所有主流浏览器都支持 position 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

可能的值

TIY 实例

描述
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。

 定位:相对定位本例演示如何相对于一个元素的正常位置来对其定位。定位:绝对定位本例演示如何使用绝对值来对元素进行定位。定位:固定定位本例演示如何相对于浏览器窗口来对元素进行定位。设置元素的形状本例演示如何设置元素的形状。此元素被剪裁到这个形状内,并显示出来。Z-indexZ-index可被用于将在一个元素放置于另一元素之后。Z-index上面的例子中的元素已经更改了Z-index。

下面给大家介绍CSS中的Position属性

CSS的Position很重要,有以下几个值:static,relative,absolute,fixed。

Static:静态定位。如果你没有设置position属性,那么缺省就是static。top,left,bottom,right等属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一。

Relative:相对定位。元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍然会分配给它,它两边的元素不会向它靠近来填充那个空间,但它们也不会从元素的新位置被挤走。

Absolute:绝对定位。元素将按照包含它的元素的位置进行调整,比如它嵌套在另一个绝对定位的元素中,那么就相对于那个元素定位。

Fixed:固定定位。元素将被设置在浏览器上一个固定位置上,不会随其他元素滚动。形象点说,上下拉动滚动条的时候,fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。

注意:很多网页都是居中的,这样,当对元素进行绝对定位的时候,在不同的分辨率下显示会有偏差,这时,我们可以通过类似下面的方法来处理:

<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 10px;"></div>
</div>
Javascript 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
BootStrap响应式导航条实例介绍
May 06 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 Javascript
js实现拖拽效果(构造函数)
Dec 14 #Javascript
jQuery滚动加载图片实现原理
Dec 14 #Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 #Javascript
jquery实现倒计时效果
Dec 14 #Javascript
JavaScript 七大技巧(一)
Dec 13 #Javascript
JavaScript 七大技巧(二)
Dec 13 #Javascript
js自定义回调函数
Dec 13 #Javascript
You might like
如何使用动态共享对象的模式来安装PHP
2006/10/09 PHP
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
PHP return语句的另一个作用
2014/07/30 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
javascript获取url上某个参数的方法
2013/11/08 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
python实现用户登录系统
2016/05/21 Python
Python语言的变量认识及操作方法
2018/02/11 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
python实现计算器功能
2019/10/31 Python
Python2与Python3的区别详解
2020/02/09 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
大专生的学习自我评价
2013/12/04 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
Python中threading库实现线程锁与释放锁
2021/05/17 Python