在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. Jquery html页面处理基础

    1.怎样获得浏览器的可视高度?   var windHight = $(window).height(); //获得浏览器的可视高度 2.怎样获得滚动条相对于顶部的高度?   var scrollHi ...

  2. Hibernate 1、Hello Hibernate

    所使用到的jar 包: 1.创建实体类 public class User { private Integer id; private String name; private String addr ...

  3. Risk（最短路）

    Risk Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 2915   Accepted: 1352 Description ...

  4. ShareSDK的简化压缩和使用样例

    share sdk 太大了  于是自己 開始简化,  删除了 ipad 的图片和 framework ,  压缩了 sharesdk 中的 图片,用几k的图片 替换了几个 200多k 的图片 仅仅保留 ...

  5. ASP.NET mvc4 WEB API异常处理

    当一个web api抛出一个异常后 此异常会被转化成一个HTTP响应 错误代码为500的服务错误 但是如果你不想让客户端看到500的错误码 你也可以自定义错误码 如下代码当用户输入的ID没有与之相关的 ...

  6. UIViewController、UINavigationController与UITabBarController的整合使用

    UINavigationController与UITabBarController是iOS开发中最常用的两种视图控制器,它们都属于UIViewController的子类,继承关系如下: @interf ...

  7. android入门——BroadCast(1)

    使用广播要定义一个广播接收类,如 package com.example.wkp.broadcast; import android.content.BroadcastReceiver; import ...

  8. Myeclipse 常用操作（待补充）

    1.更改背景色 进入myeclipse工作区,选择window->Preferences->General->Editors->Text Editors->Backgro ...

  9. JavaWeb核心编程之(三.2)Servlet配置

    Servlet配置 1.配置Serlvet加载时机 2.配置多映射 配置加载时机 新建项目config->创建包com.xiaoan.config->创建类FirstServlet imp ...

  10. js操作cookie，js判断浏览器属性，

    在默认情况下,只有设置cookie的网页才能读取该cookie.如果想让一个页面读取另一个页面设置的cookie,必须设置cookie的路径. http://www.jb51.net/article/ ...