1、绝对定位:position:absolute;

  当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置。如果上下左右的绝对偏移量都是0,那么它将漂浮在原来的位置上,否则,会根据相对该元素外的第一个非static属性的元素进行定位,如果没有非static属性的父元素,则相对于body定位。当偏移后超出浏览器视线的向下或向右的内容不会被隐藏,而是会出现滚动条,但是向左或向上的内容超出后会被隐藏。

2、相对定位:position:relative;

  当设置了相对的偏移量后,这个div原来所占据的位置(文档流)不会被后面的文档流填补,而是空在那里。当偏移后所有超出浏览器视线的内容会被隐藏。

3、position:fixed;固定定位

  设置后,元素脱离文档流,可以使层级固定不动。

4、absolute/relative/fixed三者区别:

  ①相对定位relative不会失去文档流的位置,而绝对定位absolute会失去原来在文档流中的位置,被后面的内容所取代。

  ②无论是相对定位relative、固定定位fixed还是绝对定位absolute,当偏移量内容超出上面、左边浏览器窗体(即可视区域)的时候,超出内容都会被隐藏;但是当偏移量内容超出右边、下面窗体的时候,相对定位relative会隐藏超出部分,而固定定位fixed、绝对定位absolute会出现滚动条。

  ③相对定位relative、固定定位fixed和绝对定位absolute都会脱离正常文档流,浮动在正常文档流的上面,如果遮盖了正常文档流,可以通过设置z-index来解决。

5、absolute/relative/fixed实际应用

①position的值为absolute或fixed可以创建一个BFC

  BFC:块级格式化上下文,把浮动的元素框起来,浮动不会溢出,相当于页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素。

  BFC作用: a.清除浮动

        b.防止margin折叠

        c.左右两栏布局

②position:fixed  能够使层固定不动,比如使导航栏不会随页面滚动而滚动。

③绝对定位里这些值可以不指定,能够自动计算:top/left/right/bottom/width/height ,如果冲突了,以width和height为准。处理冲突也是可以进行一些利用,比如居中。

本文链接:http://www.cnblogs.com/xsilence/p/5530402.html

position:absolute/relative/fixed小结的更多相关文章

  1. 今天我们来谈谈绝对定位和相对定位的区别,和需要注意的问题;position:absolute|relative;

    首先position:absolute|relative; 前者是绝对定位,后者是相对定位: position属性的四个值: static,relative,fixed,absolute; 重点重点重 ...

  2. 定位 position: absolute & relative

    [position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...

  3. CSS绝对定位和相对定位 position: absolute/relative

    absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...

  4. css总结1:position定位:absolute/relative/fixed

    1 [Positioning(定位)] Positioning作用:指定了元素的定位类型.position包括四个值:static,relative,fixed,absolute. css定位解析:元 ...

  5. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  6. [转]关于position 的 static、relative、absolute、fixed、inherit

    本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. sta ...

  7. z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

    今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应.经过我的反复检查,发现只要给所 ...

  8. HTML静态网页的格式与布局(position:(fixed、absolute、relative)、分层、float(left、right))

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute 1.外层没有position:absolute(或r ...

  9. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

随机推荐

  1. Xamarin安装和跳坑指南

    安装Checklist 注意:本文只描述安装过程,由于组件的版本更新很快,为保证文章时效性,不提供下载链接,也尽可能不指明具体版本. 安装Visual Studio 2015进行默认安装,除非已经FQ ...

  2. JavaScript寄生组合式继承分析

    JavaScript寄生组合式继承特点: 避免了在子类prototype上创建不必要多余的属性,相比直接继承基类的实例效率要高. 是JavaScript 实现继承的最有效方式. <script& ...

  3. jQuery cbpContentSlider 滑动切换

    cbpContentSlider是一款选项卡插件,只要按照以下html结构就可以自动生成菜单切换内容特效. 在线实例 实例演示 使用方法 <div id="cbp-contentsli ...

  4. Awesomplete - 零依赖的简单自动完成插件

    Awesomplete 是一款超轻量级的,可定制的,简单的自动完成插件,零依赖,使用现代化标准构建.你可以简单地添加 awesomplete 样式,让它自动处理(你仍然可以通过指定 HTML 属性配置 ...

  5. MAC下利用Github 、hexo、 多说、百度统计 建立个人博客指南

    1.前期准备: (1)注册github账号 (2)安装xcode (3)安装node.js 2.创建repository: (1)开个github的个人主页,点击创建仓库按钮 New reposito ...

  6. js调用soapWebService服务

    js调用soapWebService服务 什么是 SOAP? SOAP 指简易对象访问协议 SOAP 是一种通信协议 SOAP 用于应用程序之间的通信 SOAP 是一种用于发送消息的格式 SOAP 被 ...

  7. iOS 使用AFNetworking遇到错误 Request failed: unacceptable content-type: text/html

    错误日志: Error Domain=com.alamofire.error.serialization.response Code=-1016 "Request failed: unacc ...

  8. 阿里云上部署 centos+nodejs+mongodb

    先执行 yum -y update nginx 安装 yum -y install nginx 设置开机启动 chkconfig nginx on nodejs 安装: yum install nod ...

  9. Java你可能不知道的事系列(1)

    概述 本类文章会不段更新分析学习到的经典面试题目,在此记录下来便于自己理解.如果有不对的地方还请各位观众拍砖. 今天主要分享一下常用的字符串的几个题目,相信学习java的小伙伴们对String类是再熟 ...

  10. 9、数据库工程师要阅读的书籍 - IT软件人员书籍系列文章

    数据库设计是软件项目底层的工作,它关系到软件项目的基础内容设计问题.数据库工程师的工作,就是设计数据库,维护数据库,优化数据库,这个跟DBA数据库助手的工作类似.现在的数据库有好几种了,比如MS SQ ...