一、在此先说一下文档流的概念：

　　　　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的更多相关文章

  1. 浅谈css中的position属性

    我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...

  2. 浅谈css中的position

    什么是position,根据css 2.1中的描述,position和float的值决定了浏览器要采用那种定位算法来计算元素盒子的具体位置.先避开float不谈,本文主要介绍position属性的不同 ...

  3. position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  4. 定位 position: absolute & relative

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

  5. position:absolute/relative/fixed小结

    1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...

  6. css position: absolute、relative详解

    CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...

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

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

  8. 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  9. positio:absolute与position:relative的区别

    absolute 能让元素 inline-block 化:例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度. float ...

随机推荐

  1. nginx错误：unknown directive "锘? in F:\nginx/conf/nginx.conf:3

    C:\Users\Administrator>d: D:\>cd D:\nginx-1.4.7 D:\nginx-1.4.7>start nginx.exe D:\nginx-1.4 ...

  2. Js-Html 前端系列--页面撑开头尾

    今天学习过程中,发现一个超实用的方法,就是当页面有尾部,但是内容又不多的情况下,让中间的内容把尾部撑到底部. <script type="text/javascript"&g ...

  3. Java8 HashMap之tableSizeFor

    Java8对许多内置的容器进行了优化与拓展,其中对HashMap的改变尤其大.之后将进行总结. 最近在看HashMap的源码时,发现了里面好多很不错的算法,相比Java7从性能上提高了许多.其中tab ...

  4. jsp Ajax请求(返回json数据类型)

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  5. mysql java写入时间少14小时

    查看时区: mysql> show variables like '%time_zone%'; +------------------+--------+ | Variable_name | V ...

  6. leetcode 024

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...

  7. CoreJavaE10V1P3.8 第3章 Java的基本编程结构－3.8 控制流程（Control Flow）

    通过使用条件语句.循环语句可以实现流程的控制. 3.8.1 块作用域(Block Scope) 块(Block)就是由一对花括号包围起来的部分.他指定了一个变量的生存范围,与一个方法的操作范围. Ja ...

  8. Mysql 5.6 解压版配置方案

    # For advice on how to change settings please see # http://dev.mysql.com/doc/refman/5.6/en/server-co ...

  9. Mysql 常用命令和注意事项

    1. 连接mysql数据库 如果配置了环境变量可以直接运行,如果没有配置环境变量需要在安装目录...\bin下运行, cmd -> mysql -u root -p,然后输入密码: 或者可以运行 ...

  10. 【转】SQL Server 2008 事件探查器(SQL SERVER Profiler)

    跟踪数据库sql语句的执行情况.例:一个系统,用到了sql server 数据库,这个系统共有500张表,当用户在前台页面做某一个操作时,比如插入,登录等等,我们想知道此刻是在对哪一张表操作,打开事件 ...