定位模型 2017年6月8日 fanbright

css支持6种定位模型

  • 静态
  • 绝对
  • 固定
  • 相对
  • 浮动
  • 相对浮动

设定位置

  • position:static;可以取消元素的定位设置,使之恢复为原先在常规流中的显示方式.static是默认值.

  • position:relative;可以使元素相对于常规流的位置偏移一定距离.

  • position:absolute;可以使元素相对于常规流的位置或最近定位祖先元素的位置偏移一定的距离.

  • position:fixed;可以使元素相对于窗口偏移一定的距离.

  • z-index可以设置元素的堆叠顺序,数值越大,元素越靠上.

最近定位祖先元素

  • 如果设定位置的元素没有定位祖先元素,那么<body>就成为定位祖先元素,换言之,<body>是默认设定位置元素.
  • 最近定位元素必须是有效的祖先元素(relative|absolute|fixed),css不支持相对于文档中任意元素进行定位的方法.
  • position:relative;是一个非常好的创建定位祖先元素的方法,因为它不会离开常规流.使用这种方法,能够创建出既保持常规流又实现绝对定位的布局.

原子显示

设定了位置的元素是原子显示的,这意味着它的静态后代元素,行内内容和背景之间不可能出现外部元素.通过使用相对定位,绝对定位和固定定位模式,就可以将元素设置为原子显示,设置为overflow:scroll|auto的块级元素也是原子显示的

而没设定位置的静态块级,当发生重叠时,他们的行内内容不会重叠,但是他们的边框和背景会发生重叠,但文字不会.

z-index

适用于所有元素,默认auto

  • z-index不是全局属性,而是相对于设置了数字值z-index的最近定位祖先元素而定.根元素html会创建根堆叠上下文.每一个指定数字值z-index的设定位置元素都会创建一个本地的局部的堆叠上下文.
  • 静态定位元素按照文档出现顺序从后往前进行堆叠.
  • 设定位置元素忽略文档元素出现顺序,而是根据z-index值由小到大的顺序从后往前堆叠.负值的设定位置元素位于静态定位元素和非设定位置浮动元素之下

一 静态定位模型

position:static;默认是static;

  • 静态元素的开始位置由前一个静态元素的位置确定.静态元素的尺寸,内边距,边框,和外边距决定了下一个元素的开始位置.
  • 相邻元素的垂直外边距会合并在一起,最终的外边距是两个相邻元素外边距的较大值
  • 将左右外边距设置为auto,可以使已设定尺寸的静态块级元素居中显示.

二 绝对定位模型

position:absolute;

  • 百分数是相对于最近定位祖先元素的尺寸而言,而非父元素的尺寸.
  • 将元素的left,right,top,bottom,设置为auto,可以使它恢复原先在常规流中的位置.
  • 与浮动元素不同,绝对元素不会自动排列.不会受其他元素影响,也不会影响别的元素.
  • 如果一个元素的所有子元素都设置为绝对定位,那么它的高度会变为0,所有它的子元素都离开了常规流.
  • 如果不存在定位祖先元素,会根据<body>来定位

绝对定位居中,一般元素

 div{

                position:absolute;

                width:200px;

                height:200px;

                margin:0 auto;

                border:1px solid blue;

                /*left:0;*/ 这两条没用,没有影响

                /*right:0;*/

}

绝对定位居中,静态行内元素

对于静态行内元素,如em,strong,span等,但是不包括行内可替换元素(input,img,textarea等),使用绝对定位模式absolute时,width和right可以使用为了要居中,需要额外的加上left:0;和right:0;使margin:0 auto;可以正常的生效.

注意,这里left和right必须是0才行.

  #em{

                position:absolute;

                width:200px;

                height:200px;

                margin:0 auto;

                border:1px solid blue;

                left:0;

                right:0;

}

三 固定定位模型

position:fixed;可以将任意元素变为固定位置元素

  • 切记:固定定位的元素位置是相对于窗口而定,而非相对于最近定位祖先`,而且元素不会随页面滚动而滚动.
  • 因为它是相对页面来定位,所以不需要最近定位祖先
  • 设置时最好以top,left来进行偏移定位,当同时设置top,left,bottom,right时,会优先使用top和left的值,只有当top和left不存在时,bottom和right才会生效

四 相对定位

position:relative;

  • 使用left和top来改变元素位置,left和top默认是auto,auto会使相对定位元素保持在常规流中原有位置.
  • 任何元素都可以设置position:relative;从而其绝对定位的后代元素都可以相对于它进行定位.

五 浮动定位与复位

使用float:left;和float:right;可以使元素离开常规流.

  • 使用float:none;默认是none,可以覆盖元素的其他浮动规则,也可以避免继承浮动
  • 浮动元素不会影响块级框的位置,而只影响行内元素
  • clear:left;clear:right;clear;both;
  • 任意元素都可以设置为浮动元素,clear适用于表格,块级元素和浮动元素
  • clear 不适用于行内,绝对定位或固定定位的元素

六 相对浮动定位

使用float可以使一些元素成为浮动元素,通过relative可以浮动元素设置为相对定位,相对浮动元素仍然位于浮动元素所在的常规流中,可以使用left和top设置它在流中的偏移位置.

  • 只有positon:relative;和position:static;适用于浮动元素.而设定为absolute和fixed时,显示结果是不确定的.

零散

  • 在css中,如果参数值是0的话,不要加单位,

  • 浏览器在渲染一个元素内容之前,会先渲染它的框,顺序是从背景颜色开始,然后是背景图片,接着是边框,最后,浏览器会在框之上渲染框的内容

CSS的六种定位模型的更多相关文章

  1. CSS概念 - 可视化格式模型（二） 定位概述（普通流、绝对定位）

    2.定位概念 上一节熟悉了盒模型, 现在来看一下可视化格式模型和定位模型. 理解这两个模型的细微差异是非常重要的, 因为它们一起控制着如何在页面上布置每个元素 2.1 可视化格式模型 CSS有三种基本 ...

  2. 精通css 高级web标准解决方案——可视化格式模型-定位模型

    CSS 中有三种定位机制:普通流.浮动.绝对定位.(默认为普通流) 改变文档流:display: inline-block; (支持到ie8及以上) 1-匿名块框: <div> 你好! & ...

  3. HTML 学习笔记 CSS样式（定位）

    CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...

  4. （转）CSS+DIV float 定位

    来自:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能 ...

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

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

  6. CSS中的定位与浮动

    CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...

  7. CSS学习之定位

    CSS相对定位        设置为相对定位(relative)的元素会偏移某个距离,元素仍保持其未定位前的形状,他原本所占的空间仍然保留 相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定位 ...

  8. CSS学习摘要-定位实例

    CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...

  9. CSS学习摘要-定位

    CSS学习摘要-定位 注:全文摘自MDN-CSS定位 定位允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置. 本文解释的是定位 ...

随机推荐

  1. jQuery获取动态产生的html内标签或元素

    下午分享<MVC编辑状态两个DropDownList联动>http://www.cnblogs.com/insus/p/3426563.html 不久,马上有网友问及三级联动的例子.Ins ...

  2. vs2017 未能完成操作。不支持此接口

    打开vs2017开发者命令提示符 切换至安装下的指定目录 执行下面的命令就可以了    需要注意的是一定要用vs2017的开发人员命令提示符  别用cmd gacutil -i Microsoft.V ...

  3. cloudera Manager使用总结

    最近在用cloudera Manager来 在几个虚拟机上进行hadoop 的安装,总结一下遇到的问题. 1   似乎没有  start-balancer.sh 命令 似乎安装包中没有这个命令  怎么 ...

  4. 排查CentOS7.0的联网情况

    1.ifconfig命令. 查看网络配置是否有问题 在/etc/sysconfig/network-scripts/ifcfg-ens33里面配置好网络,记住onboot=on这个选项一定要设置,不然 ...

  5. 环境配置问题: 关于IDEA配置tomcat

    1. 先下载并解压缩一个tomcat7 2.打开idea 3. -Xms256M -Xmx1024M -XX:PermSize=64M -XX:MaxPermSize=128M 关于热部署设置参考:  ...

  6. Oracle总结之plsql编程（基础八）

    原创作品,转自请注明出处:https://www.cnblogs.com/sunshine5683/p/10328524.html 一.函数 1.函数是可以返回一个特定的数据,函数的创建中必须包含re ...

  7. 【C#数据结构系列】栈和队列

    一:栈 栈和队列也是线性结构,线性表.栈和队列这三种数据结构的数据元素以及数据元素间的逻辑关系完全相同,差别是线性表的操作不受限制,而栈和队列的操作受到限制.栈的操作只能在表的一端进行,队列的插入操作 ...

  8. Okhttp3 使用和原理（DEMO）

    基本使用: http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0106/2275.html http://www.jianshu.c ...

  9. js中Date 方法

    Date (对象) Date 对象能够使你获得相对于国际标准时间(格林威治标准时间,现在被称为 UTC-Universal Coordinated Time)或者是 Flash 播放器正运行的操作系统 ...

  10. 深入理解CSS3 gradient斜向线性渐变——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3639 一.问题没有想 ...