定位模型 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. [android] 看博客学习hashCode()和equals()

    equals()是Object类提供的一个方法,众所周知,每一个java类都继承自Object,所以说每一个对象都有一个equals()方法,我们在用这个方法时却一般重写这个方法 Object类中eq ...

  2. leetcode实践：通过链表存储两数之和

    题目: 两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字.如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们的 ...

  3. 2017 年 PHP 程序员未来路在何方

    PHP 从诞生到现在已经有20多年历史,从Web时代兴起到移动互联网退潮,互联网领域各种编程语言和技术层出不穷, Node.js . GO . Python 不断地在挑战 PHP 的地位.这些技术的推 ...

  4. Could not initialize plugin: interface org.mockito.plugins.MockMaker

    IDE:Idea 添加依赖 <dependency> <groupId>net.bytebuddy</groupId> <artifactId>byte ...

  5. 深入浅出Mybatis技术原理与实战（杨开振）(带详细书签) PDF 下载 高清 完整版+源码

    (杨开振) 源码 IDE eclipse 建表语句也在里面 电子书+源码地址

  6. Android四大组件-Broadcast Receiver

    http://www.jianshu.com/p/1013a366cc72 http://www.jianshu.com/p/ca3d87a4cdf3 前言 基础知识. 1.Android广播分为两个 ...

  7. Nodejs编译Native Code：使用C++构建工具npm

    Nodejs的很多NPM包需要本地编译,通常是C++写的代码,例如图像处理模块等. 这是如果生产环境没有安装Visual Studio 2015等开发工具,通常会编译失败,发现了一个npm专门干这事儿 ...

  8. 【Redis】Redis学习（七） Redis 持久化之RDB和AOF

    Redis 持久化提供了多种不同级别的持久化方式:一种是RDB,另一种是AOF. RDB 持久化可以在指定的时间间隔内生成数据集的时间点快照(point-in-time snapshot). AOF ...

  9. 浅尝Java（一）

    主题:数据类型,数值类型变量相互转化 Java是强类型的语言,与JavaScript(松散型)在数据类型上有很大的差异(1.所有变量必须先申明,后使用:2.指定类型的变量只接受与之匹配类型的值).这个 ...

  10. zabbix系列之安全

    https://blog.csdn.net/xiaoyu_0217/article/details/73500125 存在问题: 1)zabbix的Admin口令太弱或使用默认口令(Admin/zab ...