定位模型 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. VS2010 调试C++项目 fatal error LNK1123 错误解决办法

    最近用VS2010写C++项目,奇怪的是每次生成解决方案都有一个fatal error LNK1123错误,提示生成失败.查阅资料总结解决方案如下: (1)项目——>属性——>连接器——& ...

  2. WebApi实现单个文件的上传下载

    上传和下载是很常用的功能了,只有当用到的时候才发现不会写...,经过一番百度.筛选.整理修改后,实现了功能,下面简单的记录下实现方法. 一.上传功能 1.前端代码 上传文件 <input typ ...

  3. Lightning Chart 8.4版新功能

    LightningChat V8.4版在如下功能上做了改进 边距 缩放功能 Legend box 的自动定位 正投影 相机orientation与rotation系统 全新3D 坐标空间转换器 Poi ...

  4. java文件下载以及中文乱码解决

    在客户端下载文件时替换下载文件的名称,但是当名称是中文时浏览器会出现乱码,解决代码如下: public org.springframework.http.ResponseEntity<Input ...

  5. 【ibatis】IBatis介绍

    Ⅰ .什么是Ibatis? ① iBATIS的是一个持久层框架,它能够自动在 Java, .NET, 和Ruby on Rails中与SQL数据库和对象之间的映射.映射是从应用程序逻辑封装在XML配置 ...

  6. Linux 安装redis,redis发布订阅,持久化

    安装redis 1.安装redis的方式 -yum (删除这个yum安装的redis,我们只用源码编译安装的) -rpm -源码编译 2.删除原本的redis yum remove redis -y ...

  7. ERP、CRM、CMS

    ERP: 全称:Enterprise Resource Planning 解释:企业资源计划. ERP 是一种主要面向制造行业进行物质资源.资金资源和信息资源集成一体化管理的企业信息管理系统.ERP ...

  8. iframe页面刷新问题

    1.问题:当iframe的页面加载过再关闭之后,如果iframe的src没有发生变化,js不会重新加载,再次打开页面不会刷新: 2.解决方法:关闭页面时清空src,再次打开时即可重新加载最新数据. $ ...

  9. Expo大作战(十五)--expo中splash启动页的详细机制

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  10. Django Forms实例

    # Django的Form主要具有一下几大功能: # # 生成HTML标签 # 验证用户数据(显示错误信息) # HTML Form提交保留上次提交数据 # 初始化页面显示内容 # forms组件生成 ...