通过设置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 相关文章推荐
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
使用Vant完成Dialog弹框案例
Nov 11 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
CI(CodeIgniter)框架介绍
2014/06/09 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
php获取错误信息的方法
2015/07/17 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
python根据文件大小打log日志
2014/10/09 Python
python 不以科学计数法输出的方法
2018/07/16 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
python 多线程中join()的作用
2020/10/29 Python
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
生物化学研究助理员求职信
2013/10/09 职场文书
交通事故检查书范文
2014/01/30 职场文书
产假请假条
2014/04/10 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL