在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. docker 容器扩盘

    docker:/root/sbin# cat add_fs.sh #!/bin/bash #This script is dynamic modify docker container disk #A ...

  2. 使用 Node.js 做 Function Test

    Info 上周 meeting 上同事说他们现在在用 java 写 function test,产生了很多冗余的代码,整个项目也变得比较臃肿.现在迫切需要个简单的模板项目能快速搭建function t ...

  3. Java实现验证码图片

    这样的实现方式对JDK版本有要求. 1 package edu.cloud.editmap.utils; import java.awt.Color; import java.awt.Font; im ...

  4. Struts2五、Struts1与Struts2的区别

    Struts1和Struts2的区别和对比: Action 类:  • Struts1要求Action类继承一个抽象基类.Struts1的一个普遍问题是使用抽象类编程而不是接口,而struts2的Ac ...

  5. wxpython 中的所有控件及高级应用

    转自http://xoomer.virgilio.it/infinity77/Phoenix/lib.agw.html,,,哈哈终于找到了这块的内容,书上基本没有讲解 This is the Adva ...

  6. `npm install --save --save-exact react-native` failed

    当你使用命令行创建一个项目 react-native init  项目名称  后出现以下错误 Installing react-native package from npm... /bin/sh: ...

  7. 编程好帮手----CodeSmith Generator Studio

    这是一个很好用的代码生成器,可以将数据库中的表生成类,这是和表中的字段一一对应这就很给力了,方便准确

  8. excel中匹配数据

    =VLOOKUP(E6,BC:BD,2,0) E6就是要对应的那一列的一个单元格,BC就是对应的那一列,BD就是要取值的那一列

  9. SQL Server数据库--》top关键字，order by排序，distinct去除重复记录，sql聚合函数，模糊查询，通配符，空值处理。。。。

    top关键字:写在select后面 字段的前面 比如你要显示查询的前5条记录,如下所示: select top 5 * from Student 一般情况下,top是和order by连用的 orde ...

  10. M记单刷鸡盒副本

    今天去M记单刷鸡盒副本,听说此副本掉落最新道具:黑暗之门.鸡翅区和鸡块区全通无压力,鸡腿区难度最大,老一是个灭团点.现在肚子很难受,刚去厕所吐了一把,看来有点高估自己,此副本最好还是组队前往,单刷压力 ...