定位模型 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. CentOS 7.2安装Docker-ce

    1.Docker分类 Docker Engine改为Docker CE(社区版) 它包含了CLI客户端.后台进程/服务以及API.用户像以前以同样的方式获取.Docker Data Center改为D ...

  2. echart 数据视图 样式重写

    来源http://blog.csdn.net/u010705091/article/details/75212724 echarts折线图的数据视图样式重写 在echarts.js中,点击折线图的数据 ...

  3. winform窗体 控件【菜单和工具栏控件】【容器控件】

    winform的菜单栏和工具栏    1.ContextMenuStrip   -- 右键菜单     可以绑定在任何一个控件上,添加操作快捷键,并可以设置多层    每行相当于一个按钮,输入-可添加 ...

  4. CSS学习笔记03 CSS层叠性、继承性、特殊性

    层叠性 所谓层叠性是指多种CSS样式的叠加,也就是说后面设置的样式会层叠(覆盖)之前的样式,层叠性的前提是CSS的选择器的优先级相同,例如,当使用内嵌式CSS样式表定义<p>标记字号大小为 ...

  5. C#连接Oracle方式

    1.在web.config或者app.config文件中,不会像连接SqlServer的格式那样,直接把账号密码写入就可以了 C#是微软的,oracle是Oracle公司做出来的,两家是对立的,都懂得 ...

  6. HDU2643(SummerTrainingDay05-P 第二类斯特林数)

    Rank Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  7. JavaScript--DOM进阶(20)

    // DOM自身存在很多类型,在上一章中有介绍,比如Element类型:表示的是元素节点;再比如Text类型;表示的是文本节点; 一 DOM类型 类型名 说明 Node 表示所有类型值的统一接口,IE ...

  8. JavaScript判断值是否是NaN

    第一种方法: if (!Number.isNaN) { Number.isNaN = function (n) { return ( typeof n === 'number' && ...

  9. 学习笔记（5）——实验室集群LVS监控Web界面配置

    症状:通过虚拟IP能访问到监控页面:http://192.168.253.110/ipvsadm.php,但是却无法读出LVS任务分发及集群负载信息. 打开ipvsadm.php页面,源码如下: &l ...

  10. TreeView失去焦点时亮显选中状态

    Windows Form下设置属性即可. TreeView.HideSelection = false