CSS+DIV定位分析(relative,absolute,static,fixed)
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果。今天研究了一下,总算有所了解。在此总结一下:
1、官方定义
先看下各个属性值的定义:
1、static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
2、relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。
3、absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
4、fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
static与fixed的定位方式较好理解,在此不做分析。下面对应用的较多的relative和absolute进行分析:
2、实例讲解
1、relative。定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在。如图1:
黄色背景的层定位为relative,红色边框区域为其在正常流中的位置。在通过top、left对其定位后,从灰色背景层的位置可以看出其正常位置依然存在。
2、absolute。定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在。如图2:
可以看到,在将黄色背景层定位为absolute后,灰色背景层自动补上。占据了其位置,黄色背景漂离与文档之外。
3、relative与absolute的主要区别:
首先,是上面已经提到过的在正常流中的位置存在与否。
其次,relative定位的层总是相对于自身原来的位置relative,在原来的位置上发生偏移。如图3:
图中,红色背景层为relative定位,其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对自身的位置发生了偏离,分别为top、left个20元素。而如果红色背景层定位为absolute,则情形如图4:
可以看到,红色背景层依然定义top:20px;left:20px;但其相对的元素变为定位方式为absolute或relative的黄色背景层。因此,对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位,如图5:
除top、left、right、bottom定位外,margin属性值的定义也符合上述规则。
最后重复一下:relative 不脱离文档流,absolute 脱离文档流。也就是说:relative 的元素尽管表面上看到它偏离了原来的位置(相对自身),但它实际上在文档流中还是没变。absolute的元素不仅位置改变了,同时也脱离了文档流。
版权声明:本文为小平果原创文章,转载请注明:http://blog.csdn.net/i10630226
CSS+DIV定位分析(relative,absolute,static,fixed)的更多相关文章
- CSS之定位,relative/absolute/fixed的用法
其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...
- css的定位,relative/absolute/fixed的用法
其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...
- css position: relative | absolute | static | fixed详解
static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...
- (转)Position定位:relative | absolute
原文:http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08 Position定位:relative | absolute 定位一直是WEB ...
- z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.
今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应.经过我的反复检查,发现只要给所 ...
- CSS定位:相对定位、绝对定位和固定定位(relative absolute fixed)
相对定位:position:relative; 不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可通过z-index进行层次分级. 绝对定位:position:a ...
- CSS相对|绝对(relative/absolute)定位
1.破坏性和包裹性 position:absolute与float:left,两者有两大共性:包裹性,破坏性. 包裹性 包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是 ...
- CSS 浅析position:relative/absolute定位方式
## 一.position:relative 相对定位 ## 分两种情况分析: · 无 position: relative: · 有 position: relative. 代码如下图: 显示效果如 ...
- CSS+DIV布局中absolute和relative区别
原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...
随机推荐
- PS 滤镜算法原理——高反差保留 (High Pass)
这个特效简单来说,就是一个高通滤波器, 对图像做高斯滤波,用原图减去高斯滤波后的图,再将差值加上128. clc; clear all; close all; Image=imread('4.jpg' ...
- 【14】-java的单例设计模式详解
预加载模式 代码: public class Singleton { private volatile static Singleton singleton = new Singleton(); pr ...
- 学习MQ(二)基本概念
学习MQ(二)基本概念 这次简单罗列一下MQ的基本概念,还有我对它们的理解 1.queue manager 队列管理器,这是MQ系统中最上层的一个概念.每一个queue manager都有一个侦听器, ...
- JVM terminated. Exit code=8096
http://www-01.ibm.com/support/docview.wss?uid=swg21303648 Technote (troubleshooting) Problem(Abstrac ...
- 读JVM相关的一些笔记
1.JVM的运行模式 vm一般有两种运行模式,client和server(JDK 7 后有第三种 Tiered server,后续会涉及到). client : 启动快,内存占用少,JIT编译器生成代 ...
- sqlServer遇到的问题
重置自增列:dbcc checkident(表名,reseed,数字(初始值))
- 常常搞不清楚SQLServer中的sp_columns来看一看
The sp_columns catalog stored procedure is equivalent to SQLColumns in ODBC. The results returned ar ...
- 【计算机视觉】深度相机(一)--TOF总结
http://www.voidcn.com/blog/lg1259156776/article/p-6302915.html 1.1 TOF初探 TOF是Time of flight的简写,直译为飞行 ...
- Ubuntu本地uwsgi配Django问题的解决
版本Ubuntu14.04,Django1.6.5 ubuntu本地Uwsgi调Django可能会报错: -- unavailable modifier requested: 0 -- 解决方法:先安 ...
- Jenkins实现Android自动化打包
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/77102359 本文出自[赵彦军的博客] 1.Tomcat 进入 https://t ...