在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. 04737_C++程序设计_第2章_从结构到类的演变

    例2.1 使用成员函数的实例. #define _SCL_SECURE_NO_WARNINGS #include <iostream> using namespace std; struc ...

  2. DIV以及图片水平垂直居中兼容多种浏览器

    纯css完美地解决图片以及div垂直水平居中,兼容IE7.0.IE6.0.IE5.5.IE5.0.FF.Opera.Safari具体实现css 如下,感兴趣的朋友可以参考下哈   第一种:全CSS控制 ...

  3. php,ajax登陆退出

    利用ajax可以做到页面无刷新登陆. 运行效果 目录结构 site/ css/ images/ js/ site/css/bootstrap.css(bootstrap样式表) site/js/boo ...

  4. JS前端知识模块大全

    公司前端:小胖提供,表示感谢 1. 基础 HTML, CSS, JS 文档 W3CSCHOOL: http://www.w3schools.com/ MDN: https://developer.mo ...

  5. 20141021WinForm控件属性

    一.Form对象属性:Name:窗体类的类名(一)外观:BackColor:窗体背景色ForeColor:窗体文字色BackgroundImage:背景图片Font:设置字体FormBorderSty ...

  6. 使用 MyEclipse远程调试 Java 应用程序

    远程调试,需要本程序和服务器上的程序源码是相同的,这我们服务器使用的是tomcat7.在本地通过MyEclipse 10来调试服务器上的代码,需要本地能访问到服务器,我的服务器是在linux下. 1. ...

  7. iOS开发笔记：编译时出现的错误和解决办法

    1."std::ios_base::Init::~Init()", referenced from 出现这样的编译问题,是需要再加进libstdc++.dylib和libstdc+ ...

  8. EC读书笔记系列之3：条款5、条款6、条款7

    条款5:了解C++默默编写并调用哪些函数 记住: ★编译器可以(仅仅是可以,并非必须,仅当程序中有这样的用法时才会这么做!!!)暗自为class创建default构造函数,copy构造函数,copy ...

  9. mysql utf8_bin跟utf8_general_ci的区别

    ci是 case insensitive, 即 "大小写不敏感", a 和 A 会在字符判断中会被当做一样的; bin 是二进制, a 和 A 会别区别对待. 例如你运行: SEL ...

  10. 如何使代码审查更高效【摘自InfoQ】

      代码审查者在审查代码时有非常多的东西需要关注.一个团队需要明确对于自己的项目哪些点是重要的,并不断在审查中就这些点进行检查. 人工审查代码是十分昂贵的,因此尽可能地使用自动化方式进行审查,如:代码 ...