定位模型 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. EWS 流通知订阅邮件

    摘要 查找一些关于流通知订阅邮件的资料,这里整理一下. 核心代码块 using System; using System.Collections.Generic; using System.Linq; ...

  2. [PHP] 排序和查找算法

    知乎:冒泡排序(bubble sort)的原理是什么? 潘屹峰: 冒泡排序的原理可以顾名思义:把每个数据看成一个气泡,按初始顺序自底向上依次对两两气泡进行比较,对上重下轻的气泡交换顺序(这里用气泡轻. ...

  3. Java基础——iO（一）

    此文为了解IO知识的基础篇,这块我看了几天,感觉和前段时间学习集合一样,零散又重要.想记录一下这块由浅入深的学习过程.所以,接下来会记录几篇学习笔记,之后会有以前深入总结.因为这块比较重要啊,所以一定 ...

  4. java如何正确停止一个线程

    Thread类中有start(), stop()方法,不过stop方法已经被废弃掉. 平时其实也有用过,共享一个变量,相当于标志,不断检查标志,判断是否退出线程 如果有阻塞,需要使用Thread的in ...

  5. C++ 的那些坑 （Day 1）

    永远的溢出 运算溢出 溢出是一个永恒的话题. int a = 0xf000; int b = 0xff000; long c = a * b; 此时c = -251658240,以为已经使用了long ...

  6. 微信小程序 折叠效果

    <view class='help'> <view class='help_item'> <view class='title' data-index='1' catch ...

  7. js-语言精粹-函数记忆

    函数可以将先前操作的结果记录在某个对象里,从而避免无谓的重复运算.这种优化方式被称为记忆(memoization).JavaScript的对象和数组要实现这种优化是非常方便的. 比如说,我们想要一个递 ...

  8. 【读书笔记】iOS-自定义视图的创建

    静态创建自定义视图就是以拖动的方法来创建. 动态创建自定义视图可以理解为使用代码来创建自定义视图. 参考资料:<iOS7开发快速入门>

  9. 关于DDL、DML和DCL的区别与理解

    2017年5月31日,天气阴.近期事情颇多,心情比较沉重. 端午刚过,早上上课,很多同学还处在端午的疲惫状态中没有回过神来,当然我也不例外.端午奔波三天,加上毕设的事情,可以说身心俱疲.状态不佳,整理 ...

  10. 高性能JavaScript（DOM编程）

    首先什么是DOM?为什么慢? DOM:文档对象模型,是一个独立于语言的,用于操作XML和HTML文档的程序接口(API) 用脚本进行DOM操作的代价很昂贵.那么,怎样才能提高程序的效率? 1.DOM访 ...