参考:http://www.w3school.com.cn/cssref/pr_class_position.asp

  position属性规定了元素的定位类型。任何元素都可定位,其中,绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。

  

描述
absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。

CSS 定位属性

CSS 定位属性允许你对元素进行定位。

属性 描述
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。

CSS笔记(十)position属性与定位的更多相关文章

  1. css布局学习笔记之position属性

    position属性用于定位元素,它的几个值分别如下: 1,static static 是默认值.任意 position: static; 的元素不会被特殊的定位.一个 static 元素表示它不会被 ...

  2. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  3. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  4. CSS笔记1:属性--定位

    相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块. 元素定位 属性 版本 继承 描述 position c ...

  5. CSS中的position属性笔记

    一般有5个属性,分别是:static,absolute,relative,fixed,inherit static 自然定位:这个是默认值,没有定位,再设置top,rignt,bottom,left会 ...

  6. css中关于position属性的探究(原创)

    关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记.   首先,css的position属性包含下面四种设置情况: static:默认属性.指定 ...

  7. 详解css中的position属性

    这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...

  8. 对CSS中的Position属性的一些深入探讨

    转:http://www.cnblogs.com/coffeedeveloper/p/3145790.html Position属性 Position的属性值共有四个static.relative.a ...

  9. 浅谈css中的position属性

    我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...

随机推荐

  1. init_MUTEX 与 sema_init 函数【转】

    转自:http://blog.chinaunix.net/uid-7332782-id-3211627.html 在编译Linux设备驱动程序学习(1)-字符设备驱动程序中scull.c程序时,报错: ...

  2. java多线程中的生产者与消费者之等待唤醒机制@Version2.0

    二.生产者消费者模式的学生类成员变量生产与消费demo, @Version2.0 在学生类中添加同步方法:synchronized get()消费者,synchronized set()生产者 最终版 ...

  3. XML 解析 -- IE ,Chrome

    通用的method <script type="text/javascript"> //for chrome, attach method to XMLDocument ...

  4. activeMQ下载,安装,启动,关闭

    1.新建一个文件夹activeMQ   mkdir /server 2.授权    chmod 777 /server 3.下载activeMQ安装包,拷贝到/activeMQ目录下 apache-a ...

  5. 《C++标准库》

    函数对象 使用bind时注意,占位符有自己的命名空间std::placeholders,如果不在程序开始处using std::placeholders,那么就要写成: std::bind(std:: ...

  6. python怎么装模块

    windows下 最简单的方法: File---Settings--Project  ---Project Interpreter 下----点击 +号,输入你需要安装的模块名,点击Install P ...

  7. ACM题目————玩转二叉树

    给定一棵二叉树的中序遍历和前序遍历,请你先将树做个镜面反转,再输出反转后的层序遍历的序列.所谓镜面反转,是指将所有非叶结点的左右孩子对换.这里假设键值都是互不相等的正整数. 输入格式: 输入第一行给出 ...

  8. 20150820 PROCEDURE 模板

    USE [DB_H_F1]GO/****** Object:  StoredProcedure [dbo].[sp_sys_user_add]    Script Date: 08/19/2015 1 ...

  9. JAVA fundamentals of exception handling mechanism

    Agenda Three Categories Of Exceptions Exceptions Hierarchy try-catch-finally block The try-with-reso ...

  10. 思考之一——PM(Project Manager)

    摘自:http://blog.csdn.net/moreevan/article/details/6697806