css position 属性 (absolute 和fixed 区别)
在css3中,position的属性值有：inherit, static, relative ,absolute, fixed.
inherit 是继承父元素的position属性值,IE不支持。
static 默认值，元素出现在正常的流中，忽略 （TRBL）和z-index的值。请参照下面的例子，div1由于position的值为static，所以top,left 没有起作用.
<!Doctype html>
<meta charset="utf-8">
<head>
<title>test position static</title>
<style type="text/css"> .divPos{
position:static;
left:100px;
top:100px;
}
</style> </head>
<body>
<div class="divPos">this id div 1(position is static)</div>
<div class="div2">this is div 2</div>
</body>
inherit 和 static差别：在运行过程中，position 如果为static则始终保持不变，如果为inherit则可在运行过程中改变。
relative相对定位，相对于正常文档流的正常位置进行定位。如下面的例子中，一个div 相对于正常位置 偏移100px. 这里有点需要注意，positino设置relative 之后，元素仍保留未定位前的形状，它所占用的空间会保留。就是说，未定位以前，div默认是块级元素(div默认属性)，定位之后依然是块级元素。
<!Doctype html>
<meta charset="utf-8">
<head>
<title>test position static</title>
<style type="text/css">
body{
background-color:#ffff33;
}
.divPos{
position:relative;
left:100px;
top:100px;
background-color:#000fff;
}
</style>
</head>
<body>
<div class="divPos">
The position of this div is relative...
</div>
</body>
absolute 生成绝对定位的元素，相对于static以外的第一个父元素进行定位。如下面的例子所示，
<!Doctype html>
<meta charset="utf-8">
<head>
<title>test position static</title>
<style type="text/css">
div{
background-color:#33ff33;
}
.divPos{
position:absolute;
left:50px;
top:50px;
}
.div3{
position:absolute;
left:50px;
top:50px;
}
</style> </head>
<body>
<div class="divPos">div parent
<div>
<div class="div3">div child 3</div>
</div>
</div>
</body>
fixed生成绝对定位的元素，相对于浏览器窗口进行定位。如下面的例子，可以滚动右边的滚动条，div 相对于窗口始终在相同的位置。其实，更恰当的例子，是做个购物车。
<!Doctype html>
<meta charset="utf-8">
<head>
<title>test position static</title>
<style type="text/css">
.divPos{
position:fixed;
left:50px;
top:50px;
}
.div1{
height:1000px;
}
</style> </head>
<body>
<div class="divPos">
The position of this div is fixed.And this div will be always here.
</div>
<div class="div1"></div>
</body>
css position 属性 (absolute 和fixed 区别)的更多相关文章
- CSS position属性absolute relative等五个值的解释
DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...
- css position: relative | absolute | static | fixed详解
static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...
- CSS position属性---absolute与relative
详情请点击此链接 http://www.cnblogs.com/polk6/archive/2013/07/26/3214847.html
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
- position属性absolute与relative 详解
最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...
- CSS position 属性
position: relative | absolute | static | fixed 参考网站:http://blog.csdn.net/dyllove98/article/details/8 ...
- css中position属性(absolute|relative|static|fixed)概述及应用
position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...
- 【转】CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
随机推荐
- java 书籍推荐 JavaEE程序员必读图书大推荐
java 书籍推荐 JavaEE程序员必读图书大推荐 转自:http://www.cnblogs.com/xlwmin/articles/2192775.html 下面是我根据多年的阅读和实践经验,给 ...
- asp.net textbox控件基础
asp.net有两种控件,一种是html控件,一种是asp控件,在说textbox控件之前,先看看按钮的两个命令oncommand和onclick.每次点击按钮后,都会提交命令,但是程序会首先执行Pa ...
- SSIS之数据转换用法
当SSIS报错为:“无法在unicode和非unicode字符串数据类型之间转换”,可以考虑用数据转换器实现,很简单,如下图: 第一步,找到数据转换器: 第二步,编辑数据转换器: 第三步:编辑目标映射 ...
- .NET面试题解答
抽象类和接口有什么区别?使用时候有什么需要注意的吗?答:相同点:都不能被直接实例化,都通过继承实现其抽象方法: 不同点: 1) 接口支持多继承:抽象类不能实现多继承: 2) 接口只能定义行为:抽象类既 ...
- Nutch的发展历程
Nutch的创始人是Doug Cutting,他同时也是Lucene.Hadoop和Avro开源项目的创始人 下面是Nutch的发展历程: 月由Doug Cutting发起,托管于Sourceforg ...
- Tomcat7配置数据源（Oracle）
修改../conf/content.xml <?xml version='1.0' encoding='utf-8'?> <!-- The contents of this file ...
- js基础——cssText
以前,只知道设置css里的属性都是通过 元素.style.属性名 = 属性值 的方式,此时经常遇到的情况就是类似这样: var head= document.getElementById(&quo ...
- 不可以为null值的自定义类型
1.今天早上编码发现,这很奇怪 再一看,原来是DateTime类型,DateTime进去一看发现时Struct类型,原来如此
- MYSQL定时创建表分区
MYSQL定时创建表分区 一.存储过程-表分区-----------------------------------------------------------------需求: 每月创建一个分区 ...
- js 获取月份 格式yy-mm-dd
/** * 获取上一个月 * * @date 格式为yyyy-mm-dd的日期,如:2014-01-25 */ function getPreMonth(date) { var arr = date. ...