一.定位--position属性
 1.static:默认值 没有定位--以标准文档流方式显示
 2.relative:相对定位--相对自身原来的位置进行偏移(top left right bottom)
 3.absolute:绝对定位
 4.fixed:固定定位

二.相对定位元素的规律
 1.设置相对定位的盒子会相对它原来的位置,通过指定偏移到达新的位置
 2.设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻盒子都没有影响

三.绝对定位-- absolute属性
 1.偏移位置:left right top bottom
 2.使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移,
   如果没有已近定位的“祖先元素”那么会以为浏览器为基准进行偏移
 3.绝对定位的元素从标准文档流中脱离,这意味着它们对其他元素的定位不会造成影响
 4.绝对定位不设置偏移量元素将保持原来的位置,但脱离标准文档流

四.调整元素定位重叠层的上下位置
 1.z-infex属性值:整数默认值为0
 2.设置position属性时z-iindex属性可以设置各元素之间的重叠高低关系
 3.z-index值大的层位于其小的层上方

定位--position属性的更多相关文章

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

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

  2. CSS学习笔记——定位position属性的学习

    今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...

  3. [转]总结一下CSS中的定位 Position 属性

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

  4. css定位position属性深究

    1.static:对象遵循常规流.此时4个定位偏移属性不会被应用. 2.relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进 ...

  5. 前端定位Position属性四个值

    1.static(静态定位):默认值.没有定位,元素出现在正常的流中. 2.relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身 ...

  6. [转载]CSS元素的定位position

    CSS元素的定位position 属性position   值 描述 absolute                             生成绝对定位的元素,相对于 static 定位以外的第一 ...

  7. CSS笔记(十)position属性与定位

    参考:http://www.w3school.com.cn/cssref/pr_class_position.asp position属性规定了元素的定位类型.任何元素都可定位,其中,绝对或固定元素会 ...

  8. 总结·CSS3中定位模型之position属性的使用方法

    一.position元素介绍 position属性规定了元素的定位类型,通过定位,可准确地定义元素相对于其正常位置而应该出现的位置,或者是相对于父元素.另一元素和浏览器窗口等的位置. position ...

  9. CSS 定位相关属性 :position

    我们平时经常用margin来进行布局,但是遇到一些盒子不规律布局时,用margin就有点麻烦了,这个时候我们可以用position. position:参数 参数分析: 一.absolute: 相对父 ...

随机推荐

  1. Entity Framework查询注意

    首先我们看下where的方法,直接查看定义(定义如下),其实一种是对IEnumerable的扩展,一种是对IQueryable的扩展,直接看最常用的,其实区别就在IEnumerable的扩展的参数是系 ...

  2. Android系统--输入系统(八)Reader线程_使用EventHub读取事件

    Android系统--输入系统(八)Reader线程_使用EventHub读取事件 1. Reader线程工作流程 获得事件 size_t count = mEventHub->getEvent ...

  3. Docker for Mac与IntelliJ Docker Integration插件的兼容性问题

    笔者在自己的Mac上安装的是Docker for Mac,而不是Docker Toolbox. 这两者最主要的区别在于Docker for Mac用HyperKit作为虚拟化解决方案而不是Virtua ...

  4. python基本数据类型——int

    一.int的范围 python2: 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1: 在64位系统上,整数的位数为64位,取值范围为-2**63-2**63-1: pyth ...

  5. DirectFB的架构介绍

    **************************************************************************************************** ...

  6. poj1182食物链,经典带权并查集

    动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到底是哪一种. 有人用两种 ...

  7. GBDT与LR融合提升广告点击率预估模型

    1GBDT和LR融合      LR模型是线性的,处理能力有限,所以要想处理大规模问题,需要大量人力进行特征工程,组合相似的特征,例如user和Ad维度的特征进行组合.      GDBT天然适合做特 ...

  8. 手把手教你学SVN

    注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/6822713.html  ) 作者:wangwen896 整理 对于很多新手来说,SVN 代码托管一无所 ...

  9. IOS的自定义控件

    这里做一个类似于下面界面的小案例 1.创建一个空的布局文件 .xib new File -->User Interface -->选择View 创建一个空的view ,会自动生成一个 .x ...

  10. 堆和栈(java内存)

    栈内存: 在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配.当在一段代码块中定义一个变量时,java就在栈中为这个变量分配内存空间,当超过变量的作用域后,java会自动释放掉为 ...