在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. CC++初学者编程教程(5) 安装codeblocks软件开发环境

    Code::Blocks 是一个开放源码的全功能的跨平台C/C++集成开发环境. Code::Blocks是开放源码软件.Code::Blocks由纯粹的C++语言开发完成,它使用了蓍名的图形界面库w ...

  2. C# 分析搜索引擎url 得到搜索关键字

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. GCDAsyncUdpSocket的使用

    tips: 要注意服务器端口与客户端端口的区别,如果客户端绑定的是服务器的端口,那么服务器发送的消息就会一直发送给服务器.

  4. vmware虚拟机迁移导致的eth0消失问题

    将原来的ubuntu虚拟机文件迁移到还有一台机子之后. ifconfig显示仅仅有一个lo网卡,网上找了一些文章.大多是改动/etc/network/interfaces 原来内容是 # ###### ...

  5. android 网络状态判断【转】

    import java.net.InetAddress; import android.app.Activity;import android.content.Context;import andro ...

  6. 关于Resharper的使用经验

    发现Resharper这东西真的有点累赘,重构也是,一开始用会有很多莫名其妙的提示.现在的项目用了Resharper,js是很方便,有定位功能,但连TypeScript的js都有了.

  7. 学习Javascript DOM 编程艺术的一点心得

    最近又看了一遍JS DOM编程艺术,照例来写一写读后感. 其实,我从中学到最深的是几个概念:1.平稳退化.当浏览器并不支持JS的时候网页的基本核心功能是还可以用的:2.逐渐增强.在原始的信息层上用其他 ...

  8. Programming C#.Inheritance and Polymorphism

    继承 C#中,创建派生类要在派生类的名字后面加上冒号,后面再跟上基类的名字: public class ListBox : Control 提示:C++程序员注意了,C#没有私有或者保护继承 多态 继 ...

  9. leetcode Longest Valid Parentheses python

    class Solution(object): def longestValidParentheses(self, s): """ :type s: str :rtype ...

  10. 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数

    刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...