浅谈position: absolute和position:relative
一、在此先说一下文档流的概念：
1，文档流定义：
百度百科定义：文档流是文档中可显示对象在排列时所占用的位置。
大多网友的理解：元素的位置由元素在 (X)HTML 中的位置决定。将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.
2，css定位机制：
普通流：普通流就是正常的文档流，在HTML里面的写法就是从上到下，从左到右的排版布局。
浮动：float(left/right)
定位：position(static/relative/absolute)
我的总结和理解：文档流就是没有使用float和position:absolute的元素，(position:relative也会使元素脱离文档流，但是它以前所在地位置还会占用空间，下面的元素不能挤上来)，使用了float和position:absolute的元素会脱离文档流，后面的元素会占用它们的位置。
例1，使用float的例子：
未使用前核心代码：
</head>
<style type="text/css">
div{ background:#C30; width:50px; height:50px; margin:10px; }
</style>
</head>
<body> <div class="ad">1</div> <div>2</div> <div>3</div> </body>
效果图如下所示
给编号为1的方框使用float:left，核心代码如下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
background:#C30;
width:50px;
height:50px;
margin:10px;
}
.ad{
float:left;
} </style>
</head> <body>
<div class="ad">1</div>
<div>2</div>
<div>3</div>
</body>
</html>
效果图如下所示：
我们可以看到，方框1覆盖了方框2，这就是方框1使用float后脱离文档流的效果，它不再占用空间，然后方框2就挤上去了。
例2，使用position:absolute使元素脱离文档流例子的核心代码如下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
background:#C30;
width:50px;
height:50px;
margin:10px;
}
.ad{
position:absolute;
top:100px;
left:100px;
} </style>
</head> <body>
<div class="ad">1</div>
<div>2</div>
<div>3</div>
</body>
</html>
带来的效果图如下：
我的总结体会：
1号方框使用position:absolute绝对定位后脱离文档流，不再占用空间，到这里我个人觉得脱离文档流的元素可以以为它是和这个页面无关，独立出来在一个新的页面排版，然后显示到以前这个页面的上面，覆盖它，各排版各的。而position:relative也会脱离出来排版，但是区别是它还站着以前的空间，如果1方框是relative元素，2，3号方框就不能挤上来。
3，position:absolute应用：
absolute是绝对定位，只有给它top,left,right,bottom当中至少一个赋值，它才会生效。例如下面才会生效
.ad{
position:absolute;
top:100px;
left:100px;
}
这里的top，left都是相当于该元素的父元素的，包含它的元素如果含有position:relative，那么这个就是它的父元素，如果没有，那么body就是它的父元素，定位就从浏览器左上角开始。
浅谈position: absolute和position:relative的更多相关文章
- 浅谈css中的position属性
我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...
- 浅谈css中的position
什么是position,根据css 2.1中的描述,position和float的值决定了浏览器要采用那种定位算法来计算元素盒子的具体位置.先避开float不谈,本文主要介绍position属性的不同 ...
- position之fixed固定定位、absolute绝对定位和relative相对定位
什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...
- 定位 position: absolute & relative
[position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...
- position:absolute/relative/fixed小结
1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...
- css position: absolute、relative详解
CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...
- CSS绝对定位和相对定位 position: absolute/relative
absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...
- 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位
什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...
- positio:absolute与position:relative的区别
absolute 能让元素 inline-block 化:例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度. float ...
随机推荐
- VS 使用技巧
1.按下alt键,可以做到竖向选择 2.
- 程序集和反射(C#)
这里我又唠叨几句,大家在学习的时候,如看书或者看视频时觉得非常爽,因为感觉基本都看得懂也都挺容易的,其实看懂是一回事,你自己会动手做出来是一回事,自己能够说出来又是另一回事了.应该把学到的东西变成自己 ...
- Android自定义控件系列(二)—icon+文字的多种效果实现
转载请注明出处:http://www.cnblogs.com/landptf/p/6290810.html 今天给大家带来一个很简单但是很常用的控件ButtonExtendM,在开发中我们经常会用到图 ...
- 【Linux学习三】Linux系统目录架构
主要包括: ●bin:保存的是可执行文件,二进制,就是命令 ●boot:引导目录,操作系统的启动加载,包含版本内核文件.greb引导程序- ●dev:硬件设备文件,如硬盘.网卡.声卡.终端.显卡,每一 ...
- PostScript学习：另一种缩写为PS的技术
1.前言 PostScript是一种编程语言,直译为"后处理脚本"[相对印刷过程而言],学名为页面描述语言.更为详细的解释见维基百科,以及其翻译版百度百科. 值得一提的是,Post ...
- Django 同步数据库命令syncdb,makemigrations,migrate
syncdb只支持新增模型到数据库中 2条命令 你将使用2条命令进行迁移和操纵数据库schema: migrate,用来使迁移生效,以及未生效时报告它们的状态. makemigrations,用来根据 ...
- html5之datalist标签
当我看到这个标签的时候,其实我是很愤怒的.因为我以前实现过这个标签的功能,当时是无比的费劲.什么js库呀,function呀.我靠,统统去屎吧,哥有datalist了.那种感觉就好像自己千辛万苦去追去 ...
- SSH 一些错误的解决办法
1.主动访问的机器需要创建私钥和公钥 (client) #cd ~#mkdir .ssh#chmod 700 .ssh#cd .ssh#ssh-keygen -t rsa //一路回车,各种提示按默认 ...
- bat脚本-set(setlocal enabledelayedexpansion) 学习
设置本地为延迟扩展.其实也就是:延迟变量,全称延迟环境变量扩展. 事件一: @echo off set a=4 set a=5&echo %a% pause 解说:为什么是4而不是5呢?在ec ...
- 在ueditor编辑器的光标停留处插入内容
业务场景: 首先在ueditor编辑器中插入一段文本,然后我想在文本的某个位置(光标停留处)插入一个字符串,这个字符串是从页面的其他地方选择得来的. 注意,当我们点击ueditor编辑器以外的地方,编 ...