position:absolute/relative/fixed小结
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小结的更多相关文章
- 今天我们来谈谈绝对定位和相对定位的区别,和需要注意的问题;position:absolute|relative;
首先position:absolute|relative; 前者是绝对定位,后者是相对定位: position属性的四个值: static,relative,fixed,absolute; 重点重点重 ...
- 定位 position: absolute & relative
[position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...
- CSS绝对定位和相对定位 position: absolute/relative
absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...
- css总结1:position定位:absolute/relative/fixed
1 [Positioning(定位)] Positioning作用:指定了元素的定位类型.position包括四个值:static,relative,fixed,absolute. css定位解析:元 ...
- css中position属性(absolute|relative|static|fixed)概述及应用
position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...
- [转]关于position 的 static、relative、absolute、fixed、inherit
本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. sta ...
- z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.
今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应.经过我的反复检查,发现只要给所 ...
- HTML静态网页的格式与布局(position:(fixed、absolute、relative)、分层、float(left、right))
一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute 1.外层没有position:absolute(或r ...
- 【转】CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
随机推荐
- Xamarin安装和跳坑指南
安装Checklist 注意:本文只描述安装过程,由于组件的版本更新很快,为保证文章时效性,不提供下载链接,也尽可能不指明具体版本. 安装Visual Studio 2015进行默认安装,除非已经FQ ...
- JavaScript寄生组合式继承分析
JavaScript寄生组合式继承特点: 避免了在子类prototype上创建不必要多余的属性,相比直接继承基类的实例效率要高. 是JavaScript 实现继承的最有效方式. <script& ...
- jQuery cbpContentSlider 滑动切换
cbpContentSlider是一款选项卡插件,只要按照以下html结构就可以自动生成菜单切换内容特效. 在线实例 实例演示 使用方法 <div id="cbp-contentsli ...
- Awesomplete - 零依赖的简单自动完成插件
Awesomplete 是一款超轻量级的,可定制的,简单的自动完成插件,零依赖,使用现代化标准构建.你可以简单地添加 awesomplete 样式,让它自动处理(你仍然可以通过指定 HTML 属性配置 ...
- MAC下利用Github 、hexo、 多说、百度统计 建立个人博客指南
1.前期准备: (1)注册github账号 (2)安装xcode (3)安装node.js 2.创建repository: (1)开个github的个人主页,点击创建仓库按钮 New reposito ...
- js调用soapWebService服务
js调用soapWebService服务 什么是 SOAP? SOAP 指简易对象访问协议 SOAP 是一种通信协议 SOAP 用于应用程序之间的通信 SOAP 是一种用于发送消息的格式 SOAP 被 ...
- iOS 使用AFNetworking遇到错误 Request failed: unacceptable content-type: text/html
错误日志: Error Domain=com.alamofire.error.serialization.response Code=-1016 "Request failed: unacc ...
- 阿里云上部署 centos+nodejs+mongodb
先执行 yum -y update nginx 安装 yum -y install nginx 设置开机启动 chkconfig nginx on nodejs 安装: yum install nod ...
- Java你可能不知道的事系列(1)
概述 本类文章会不段更新分析学习到的经典面试题目,在此记录下来便于自己理解.如果有不对的地方还请各位观众拍砖. 今天主要分享一下常用的字符串的几个题目,相信学习java的小伙伴们对String类是再熟 ...
- 9、数据库工程师要阅读的书籍 - IT软件人员书籍系列文章
数据库设计是软件项目底层的工作,它关系到软件项目的基础内容设计问题.数据库工程师的工作,就是设计数据库,维护数据库,优化数据库,这个跟DBA数据库助手的工作类似.现在的数据库有好几种了,比如MS SQ ...