希望这波position可以有帮助^_^!

  css中的position属性主要分为:static、relative、absolute、fixed、center、page、sticky(红色是css3中才可使用的值)

  1.static:对象遵循常规流。此时4个定位偏移属性不会被应用。

  2.relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。

  3.absolute:对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。

  4.fixed:与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。

  5.center(css3中使用):与absolute一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。

  6.page(css3中使用):与absolute一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute模式。

  7.sticky(css3中使用):对象在常态时遵循常规流。它就像是relativefixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。

  (1,2,3在各个浏览器下都支持;4在ie6.0中不支持,在androidBrowser2.1-2.3#3中部分支持;5,6都不支持;7在Firefox32.0+和Safari6.1-9.0【webkit】中支持)

  举个栗子(举最常用的1,2,3,4):

    1.static:

    

    2.relative:

    

    3.absolute:

    

    4.fixed:

    

    加油!

  

关于css中的position定位的更多相关文章

  1. 笔记:css中的position定位

    position的值可以是:static,relative,absolute,fixed. 默认值是 static.设置 left.top值无效. relative是相对定位,可以设置left.top ...

  2. css中对position的几种定位方式的最佳诠释

    关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示   CSS中Positio ...

  3. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  4. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  5. 装载:对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  6. 理解css中的position属性

    理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...

  7. CSS position 属性_css中常用position定位属性介绍

    css可以通过为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置, position定位是指定位置的定位,以下为常用的几种: 1.static(静态定位): 这个是元素的默认定 ...

  8. 详解css中的position属性

    这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...

  9. css 中的position z-index em rem zoom 的基本用法

    1.position定位: CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. ...

随机推荐

  1. ios ALAssetsLibrary简单的使用

    关于ALAssetsLibrary的简单使用有两个方面: 第一:存储图片/视频方法如下: // With a UIImage, the API user can use -[UIImage CGIma ...

  2. iOS关于JSONKit解析Unicode字符内容出错,问题出在\u0000

    JSONKit虽然很强大,但是一些特殊的Unicode,比如\u0000是无法解析的. 在github上作者解释了这个问题,说这个是内容提供的错误,不符合标准的内容,所以他不认为这个是自己的错误,这个 ...

  3. 使用PCA + KNN对MNIST数据集进行手写数字识别

    首先引入需要的包 %matplotlib inline import numpy as np import scipy as sp import pandas as pd import matplot ...

  4. [Android]Gradle 插件 DiscardFilePlugin(class注入&清空类和方法)

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/6732128.html Android Gradle 插件 Di ...

  5. php流程管理

    流程控制即某个人发起一个流程,通过一层一层审核,通过后,完成整个流程,若有一层审核未通过,中断整个流程.即结束! 比如请假流程: 某一员工发起一个请假流程,那么这个流程的节点人员即他的上级,上上级,上 ...

  6. 简单介绍关于IOS的生命周期过程

    初步了解一下生命周期的过程: 1.通过alloc init 分配内存,初始化controller. 2.loadViewloadView方法默认实现[super loadView]如果在初始化cont ...

  7. cmd中关闭windows2008错误弹窗

    net stop sharedaccess reg add HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\Windows /v ErrorMode / ...

  8. 初学Log4Net

    1.Log4Net是什么?       Log4Net是用来记录日志的,可以将程序运行过程中的信息输出到一些地方(文件.数据库.EventLog等)   2.Appender      Appende ...

  9. Java项目中的一些注意事项

    一.关于包命名方式 例如:com.sun.spring.xxx.service.impl 第一级:公司域名的倒序com.sun 第二级:项目名称spring 第三级:模块信息xxx 第四级:功能顶层包 ...

  10. ASP.NET MVC 常用扩展点:过滤器、模型绑定等

    一.过滤器(Filter) ASP.NET MVC中的每一个请求,都会分配给对应Controller(以下简称“控制器”)下的特定Action(以下简称“方法”)处理,正常情况下直接在方法里写代码就可 ...