几种Position常见的属性就是一下几种：

1、static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2、relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。

3、absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

4、fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

主要要区分就是absolute和relative

relative:他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位

有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。

absolute:他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位，

几种Position属性的用法的更多相关文章

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

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

  2. DIV-CSS布局中position属性详解

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

  3. Position属性四个值：static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  4. css中的display以及position属性

    我们都知道,元素分为行内元素和块级元素,在页面布局中,我们常常需要让行内元素具有块级元素的特性,或者使块级元素转换成行内元素,这就要使用我们的display属性了. 我们先定义三个div: 以上的三个 ...

  5. WPF MediaElement.Position属性

    Position 属性定义:获取或设置媒体播放时间的当前进度位置. // // 摘要: // 通过媒体播放时获取或设置进度的当前位置. // // 返回结果: // 媒体时自以来的.默认值为 00:0 ...

  6. 细说css中的position属性

    有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...

  7. position属性详解

    内容: 1.position属性介绍 2.position属性分类 3.relative相对定位 4.absolute绝对定位 5.relative和absolute联合使用进行定位 6.fixed固 ...

  8. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  9. 由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）

    写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...

随机推荐

  1. Java学习之多态

    多态的概念 多态==晚绑定. 不要把函数重载理解为多态. 因为多态是一种运行期的行为,不是编译期的行为. 多态:父类型的引用可以指向子类型的对象. 比如 Parent p = new Child(); ...

  2. HTML5 History API 实现无刷新跳转

     在HTML5中, 1. 新增了通过JS在浏览器历史记录中添加项目的功能. 2. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 3. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三 ...

  3. CodeBlocks配置文件位置

    CodeBlock配置混乱,决定重装时,删除程序后,需将配置文件删除. 配置文件位置:C:\Users\Administrator\AppData\Roaming\CodeBlocks

  4. kendo ui之grid列表

    1.test_grid.jsp <html><head> <%@ include file="/WEB-INF/jsp/common/top.jsp" ...

  5. SQLSERVER如何获取一个数据库中的所有表的名称、一个表中所有字段的名称

    1.查询数据库中的所有数据库名: SELECT Name FROM Master..SysDatabases ORDER BY Name 2.查询某个数据库中所有的表名: SELECT Name FR ...

  6. Bootstrap-datetimepicker年月日

    <div class="input-group date form_date" data-date="" data-date-format="y ...

  7. mysql 新建用户、授权、远程访问

    新建用户 insert into mysql.user(Host,User,Password) values("localhost","u",password( ...

  8. ios之JavaScript

    初次接触java脚本,感觉java脚本so interesting!为什么呢?写javascript代码感觉就像是在记流水账,无拐弯抹角,一个字,就是"干",想怎么干就怎么干,哈哈 ...

  9. 自己动手做logo

    本文主要记录用 coreDraw 和ps 做公司logo . 我修改的logo.效果还不错. 1 矢量图 和位图的区别 http://jingyan.baidu.com/article/54b6b9c ...

  10. Java并发编程学习笔记（三）——对象的组合

    重要概念: 1.在设计线程安全类的过程中,需要包含以下三个基本要素: (1)找出构成对象状态的所有变量. (2)找出约束状态变量的不变性条件. (3)建立对象状态的并发访问管理策略. 2.