在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 区别)的更多相关文章

  1. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  2. css position: relative | absolute | static | fixed详解

    static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...

  3. CSS position属性---absolute与relative

    详情请点击此链接 http://www.cnblogs.com/polk6/archive/2013/07/26/3214847.html

  4. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  5. position属性absolute与relative 详解

    最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...

  6. CSS position 属性

    position: relative | absolute | static | fixed 参考网站:http://blog.csdn.net/dyllove98/article/details/8 ...

  7. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  8. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  9. CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

随机推荐

  1. Linux下对字符串进行MD5加密

    Linux下对字符串进行MD5加密 比如要用MD5在linux下加密字符串“test",可以使用命令:$ echo -n test|md5sum098f6bcd4621d373cade4e8 ...

  2. pagespeed 安装（chrome版和firefox版）

    原文地址:http://blog.sina.com.cn/s/blog_6c9da636010103va.html pagespeed  让你的网站页面打开速度飞起来! 1.firefox版本下的安装 ...

  3. 全国计算机等级考试二级教程-C语言程序设计_第13章_编译预处理和动态存储分配

    free(p);//释放内存 p = NULL;//软件工程规范,释放内存以后,指针应该赋值为空 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h ...

  4. iOS中通知传值

    NSNotification 通知中心传值,可以跨越多个页面传值, 一般也是从后面的页面传给前面的页面.   思路: 第三个界面的值传给第一个界面. 1. 在第一个界面建立一个通知中心, 通过通知中心 ...

  5. （转）IOS笔记 #pragma mark的用法

    简单的来说就是为了方便查找和导航代码用的.   下面举例如何快速的定位到我已经标识过的代码.     #pragma mark 播放节拍器 - (void) Run:(NSNumber *)tick{ ...

  6. Expect:100-Continue & HTTP 417 Expectation[转]

    Expect:100-Continue & HTTP 417 Expectation 背景:今天调试火车票查询的代码,发现一个奇怪的事情,如果使用公司本地的代理,那么一切正常,如果使用的是公司 ...

  7. UART串口协议基础1

    Louis kaly.liu@163.com 串口协议基础 1 串口概述 串口由收发器组成.发送器是通过TxD引脚发送串行数据,接收器是通过RxD引脚接收串行数据. 发送器和接收器都利用了一个移位寄存 ...

  8. iSlider手机平台JS滑动组件

    iSlider手机平台JS滑动组件,无任何插件依赖.它能够处理任何元素,例如图片或者DOM元素.它有如下特性:能够自定义动画,自带的动画包括default, rotate, flip 和 depth你 ...

  9. jQuery源码笔记——延迟对象

    提供一种方法来执行一个或多个对象的回调函数, Deferred对象通常表示异步事件. 它是回调对象的拓展运用,在jQuery当中非常依赖回调对象. 一个简单的,只解决成功状态下的缓存实例 functi ...

  10. hibernate 简单查询

    1. 查询整个映射对象所有字段 //直接from查询出来的是一个映射对象,即:查询整个映射对象所有字段           String hql = "from Users";   ...