实例演示div+css的绝对定位和相对定位布
CSS布局学习之定位
CSS布局学习之定位对于定位而言，有广义和狭义之分。
狭义定位：指的用position属性进行定位；广义定位：指的用标准流、浮动等各种方法完成网页元素的定位。
position属性有四个值：static 如果一个元素没有position属性，默认就是static静态定位的意relative 相对定位absolute 绝对定位fixed 固定定位（IE6不兼容，IE7及以上版本开始兼容）首先我们来学习相对定位：一、相对定位特性：1、相对定位不脱标任何一个元素，都可以进行相对定位。
只需要给元素设置：1position:relative;那么元素就是相对定位的元素了。
给蓝色盒子加上position:relative 后结论：页面没有任何改变，那么说明相对定位不脱标！接下来再给蓝色盒子添加：top:30px left:60px; 观察结果如下图2、相对定位可以根据偏移属性来确定位置，当标签设置了相对定位后，会使其从正常位置移走，但原来所占的位置并不会消失。
---再来测试，给蓝色盒子添加margin-bottom:100px,相对定位的盒子，可以施加margin，不过都是在自己的本来的位置施加产生效果。
接下来测试各种定位方向:Left:Top:Right:bottom3、任意的定位值要知道移动方向在相对定位中，可以任意选择定位的4个属性，并且属性的值可以为负数。
下面四种方向的搭配都是合法的：在使用这些组合的时候，你必须清楚知道这个盒子要怎么移动？【换算法】把所有都换算成top、left表示，你不就不晕了么？新建文件测试例如：1bottom：-50px2right: -30px;等价于1top:50px;2left:30px;例如：1bottom:60px;2left:-50px;等价于：1top:-60px;2left:-50px;引言：前面我们了解到任何元素都可以进行相对定位，那么元素是否也可以进行相对定位呢？答案是可以的。
div定位布局图解(positionabsoluterelativefixed和float浮动)
div+css 用于网页布局似乎已经流行了很久很久了，可固执的我从骨子里似乎对它就有抵 触情节，一方面对之轻视，一方面每每遇到它又被其折磨的痛苦不堪。
痛定思痛，决定对它 潜心研究一下，将其玩弄于股掌之间！ 网上搜了搜 div 定位相关的内容，大多是从表面上介绍一些使用上的规律，很少有描述 为什么如此的文章。
于是，便引发了我想写这样一篇文章的冲动。
说到页面元素的定位，就不得不首先提起文档流的概念。
关于文档流，我并没有在网络或书籍上找到一个确切的定义。
在此，我只能说说我个人 对其的认识。
所谓文档流，即为页面元素自上而下、从左到右的排列次序，如同线性的流一般。
我们 在编写页面时， 也基本上是按照这样的一个顺序来安置各种元素。
如果我们没有对 div 指定 定位方式的话，浏览器就会按照其在文档流中的次序进行显示。
如：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ///TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml" > <head> <title>div 定位测试</title> </head> <body> <div id ="divFirst" style ="width:400px; height:50px;background-c olor:#FF00FF;">这里是 divFirst</div> <div id ="divSecond" style ="width:400px; height:50px;backgroundcolor:#01DFD7;">这里是 divSecond</div> <p><font color="#FF0000">*</font> 在普通的文档流中，div 块级元素是 自上而下依次排列的</p> </body> </html>上述代码中，两 div 并未采取任何的定位方式，浏览器按普通文档流的方式对其显示， 以下是显示效果：下面我们就来详细的说说 div 定位的关键的两个步骤。
CSS 定位 (Positioning) 实例：
<body>
<h1>这是标题</h1>
<img class="normal" src="/i/eg_smile.gif" />
<p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p>
</body>
</html>
14使用百分比设置图像的底部边缘
<html>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>
</html>
8垂直排列图象
<html>
<head>
}
</style>
</head>
<body>
<p>clip 属性剪切了一幅图像：</p>
<p><img border="0" src="/i/eg_bookasp.gif" width="120" height="151"></p>
</body>
</html>
5如何使用滚动条来显示元素内溢出的内容
<head>
css中相对（relative）与绝对（absolute）定位用法详解
css中相对（relative）与绝对（absolute）定位用法详解
CSS中的定位(position)常用的属性有两个：relative(相对)和absolute(绝对)。
有很多人对这两个的用法还不是很清楚，这里做一些细致的讲解。
position:relative; 表示相对定位，被定位了这个属性的标签在所属的范围内可以进行上下左右的移，这里的移动与padding或是margin所产生的位置变化是不一样的。
padding与margin是元素本身的一种边距与填充距离并不是真正的移动，而被定义为relative的元素是真正的移动，这所产生的移动距离是从margin的外围到父级标签内侧之间这一段。
position:absolute; 表示绝对定位，如果定义了这个属性的元素，其位置将依据浏览器左上角的0点开始计算，并且是浮动正常元素之上的。
那么当你需要某个元素定位在浏览器内容区的某个地方就可以用到这个属性。
于是产生了一个问题：现在大家做的网页大部分是居中的，如果我需要这个元素跟着网页中的某个元素位置，不论屏幕的分辨率是多少它的位置始终是针对页内的某个元素的，靠单纯的absolute是不行的。
正确的解决方法是：在元素的父级元素定义为position:relative;(这里可以是祖父级，也可以是position:absolute;，多谢谢old9的提出)需要绝对定位的元素设为position:absolute;
这样再设定top,right,bottom,left的值就可以了，这样其定位的参照标准就是父级的左上角padding的左上侧。
CSS教程之定位
CSS之定位总体介绍下：CSS有3中定位机制，普通流【各元素按照HTML文档的顺序依次显示】，浮动，绝对定位。
1.相对定位position = relative.顾名思义：相对与自己定位。
相对定位，元素设置left,top,bottom,right会相对与自己原来的位置，移动自己的位置。
不管是否移动，它所占据的空间仍然是原来的空间【一定占据了原来的空间】。
移动元素可能会覆盖其他的元素。
2.绝对定位position = absolute.定位相对于它的祖先定位。
仔细观察上图，定位是你根据它的祖先，不是它原来的位置。
祖先：包含绝对定位元素的最近一层设置position:relative；position:absolute的元素；没有就根据文档定位，完全脱离文档流，不占据一点空间【相对定位是占据空间的】，所以可以设置z-index【这个属性知道用处吧】属性。
由于相对定位和绝对定位配合使用，用处太大，写几个例子给你看看。
帮助理解的小例子：例子1：/*********************************效果图**************************************/以前是不是想在导航条某个位置显示下时间。
Now you can do it !/*****************************************************************************/ <div id="nav"><div id="date">2013-07-26</div></div>/*****************************************************************************/ <style type="text/css">#nav{width: 60%;height: 50px;border: 1px solid red;position: relative;}#nav #date{height: 20px;border: solid 1px #ccc;position: absolute;right: 3px;bottom: 3px;}</style>例子2：/*********************************效果图**************************************//*****************************************************************************/ <form><fieldset><legend>用户信息</legend><div><label for="username">Username:</label><input type="text" name="username" id="username"/></div><div><label for="password">password:</label><input type="text" name="password" id="password"/></div><div><label for="email">email:</label><input type="text" name="email" id="email"/><em>the email's format incorrect !</em></div></fieldset></form>会不会觉得使用fieldset，legend，label很奇怪，建议在没有很好的方法前，你的所有的表单模仿上面的代码。
CSS布局中DIV绝对定位语法
CSS布局中DIV绝对定位语法本⽂向⼤家介绍⼀下CSS布局中DIV绝对定位的⽤法，DIV绝对定位的优势在于，我们可以丝毫不差地精确控制任何元素的位置—这⾥⾯没有什么需要猜测或者运⽓的成分，相信本⽂介绍⼀定会让你有所收获。
CSS布局中DIV绝对定位CSS布局中实现分栏布局有两种⽅法。
第⼀种⽅法是使⽤四种CSS定位选项（absolute、static、relative和fixed）中的绝对定位（absolutepositioning），它可以将⽂档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。
第⼆种则是使⽤CSS中的浮动（float）概念。
DIV绝对定位或浮动都能够⽤来实现分栏效果。
⼆者可以独⽴使⽤，也可以结合在⼀起，相辅相成，这⾥重点说明⼀下DIV绝对定位的⽤法。
DIV绝对定位DIV绝对定位的优势在于，我们可以丝毫不差地精确控制任何元素的位置—这⾥⾯没有什么需要猜测或者运⽓的成分。
由于应⽤了绝对定位的元素被不留痕迹地从常规⽂档流中完全移除，所以它也不会为其他元素带来任何的影响。
那么让我们试⼀试⽤绝对定位如何实现下⾯的布局。
div绝对定位这是⼀个三栏的布局，并且是居中显⽰的。
其中，A栏是主体内容栏，B栏和C栏都是侧边栏。
⾸先，我们不可能直接⽤DIV绝对定位将A、B、C三栏定位到居中的位置，因为每个⼈显⽰器的分辨率是不同的，在1024X768分辨率的显⽰器上定位的居中效果，在别的分辨率的显⽰器上看到的效果肯定不会是居中显⽰的，那么，该如何解决这个问题呢？幸好，在DIV绝对定位模型中有个极为有⽤的特性，那就是：若某个绝对定位元素的容器也被定位过，那么该元素指定的top和left值将不会基于⽂档的根元素html（也就是浏览器窗⼝的左上⾓）计算，⽽是会基于其容器的左上⾓计算这个偏移量。
换句话说，也就是：被定位过的容器将扮演其中所有元素绝对定位起始点的⾓⾊。
所以，利⽤这个特性，我们给A、B、C栏的外部加上⼀个容器D，如下图：a、b、c栏的外部加上⼀个容器d后效果然后，我们让容器D居中，并给它加上⼀个属性：position:relative，这样，再⽤DIV绝对定位定位A、B、C的top和left值，A、B、C的位置就会基于容器D的左上⾓的位置来计算了，这样就可以实现我们期望的三栏居中的效果了。
网页CSS排版制作-绝对和相对定位
定位标签：position包含属性：relative（相对）absolute（绝对）1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。
然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。
（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。
因此，移动元素会导致它覆盖其他框）2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。
绝对定位使元素脱离文档流，因此不占据空间。
普通文档流中元素的布局就像绝对定位的元素不存在时一样。
班级晚会的主持人是这个班的学生，但是观众席中不要他的位置。
（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。
z-index的值越高，它显示的越在上层。
）3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面我们就来一一解读。
Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。
如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。
div子元素相对位置
div子元素相对位置摘要：1.相对位置的概念2.div子元素相对位置的设置3.案例分析a.静态定位b.相对定位c.绝对定位d.固定定位4.总结正文：相对位置是指元素在页面上的位置是根据其他元素的位置来决定的。
在网页设计中，div元素是常用的布局元素，如何设置div子元素的相对位置对于页面布局非常重要。
div子元素相对位置的设置主要涉及到CSS中的定位属性，包括静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。
1.静态定位（static）静态定位是默认的定位方式，元素按照正常的文档流进行排列。
2.相对定位（relative）相对定位是根据元素在正常文档流中的位置进行调整。
可以通过设置元素的top、right、bottom和left属性来改变元素的位置。
3.绝对定位（absolute）绝对定位的元素脱离了文档流，相对于最近的非static定位的祖先元素进行定位。
如果没有祖先元素，则相对于文档的初始包含块进行定位。
可以通过设置元素的top、right、bottom和left属性以及z-index属性来控制元素的位置和层叠顺序。
4.固定定位（fixed）固定定位的元素脱离了文档流，相对于浏览器窗口进行定位。
可以通过设置元素的top、right、bottom和left属性以及z-index属性来控制元素的位置和层叠顺序。
通过以上四种定位方式，可以实现div子元素的相对位置设置，从而达到页面布局的目的。
在实际应用中，需要根据需求灵活选择定位方式，使页面达到最佳视觉效果。
css绝对定位、相对定位和文档流的那些事
css绝对定位、相对定位和⽂档流的那些事前⾔接触html、和css时间也不短了，但每次⽤div+css布局的时候⼼⾥还是有点⼉虚,有时候⼲脆就直接⽤table算了,很多时候⽤div会出现些不可预料的问题,虽然花费⼀定时间能够解决，但总不是个事，所以今天特地探索了下css+div的绝对定位和相对定位和⽂档流的关系。
⽂档流的概念确切的说应该是⽂档⽂档流模型的机制，html的布局机制就是⽤⽂档流模型的，即块元素（block）独占⼀⾏，内联元素（inline）。
不独占⼀⾏如块级元素(block)<div>div1</div><div>div2</div>效果如下ok，那么怎么知道这不是因为没有设置⾼和宽的样式⽽出现的情况呢，我们听邓爷爷的话，实践是检验真理的唯⼀标准<div style=" width:100px; height:100px;">div1</div><div style=" width:100px; height:100px;">div2</div>效果如下：额，没坑你吧...⼜如内联元素(inline)<img src="Image/close.gif" alt="图⽚" style=" height:100px; width:100px;"/><a href="http:">超链接1</a><a href="http:">超链接2</a>效果如下：可以看到内联元素后跟内联元素不会另起⼀⾏我们再试下inline 后加 block<img src="Image/close.gif" alt="图⽚" style=" height:100px; width:100px;"/><a href="http:">超链接1</a><a href="http:">超链接2</a><div style=" width:100px; height:100px;">div1</div>效果如下：可以看到div1（block）是另起⼀⾏独占的相对定位 position:relative故名思意，相对定位就应该是相对于⼀个东西来定位，⽽这个东西是什么呢？其实这个东西不是什么，就是元素⾃⼰本⾝，⽤leftright top b0ttom进⾏定位后，元素会根据原来的位置进⾏移动，但由于position:relative这个属性并没有脱离⽂档流的，所以元素本⾝所占的位置会保留。
divcss盒子之绝对定位和相对定位
1．定位的专业解释(1)语法position : static | absolute | fixed | relative(2) 说明绝对定位（absolute）、相对定位（relative）。
绝对定位（absolute）：将被给予此定位方式的对象从文档流中拖出，利用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，若是对象的父级没有设置定位属性，即仍是遵循HTML定位规则的，则依据body 对象左上角作为参考进行定位。
绝对定位对象可层叠，层叠顺序可通过z-index 属性控制，z-index值为无单位的整数，大的在最上面，能够有负值（目前负值FF不支持）。
相对定位（relative）：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。
一样能够用z-index分层设计。
2．定位的形象解释我先来架设一个虚拟的场景：有一个矩形的房间，里面还有一个水桶装了些水，水里还浸泡着一个西瓜，那个房间半空中还有很多的钩子用于挂东西用。
此刻我把网页元素与上面物件对应上，那么房间就是一个网页，水桶是网页中的一个板块，桶中的水就是文本流，西瓜就是将要被定位的对象。
（1）奉献的绝对定位（absolute）对照前面解释，若是西瓜被给予绝对定位，那么就等于把西瓜从水中捞起来挂在半空中的钩子上，水桶中西瓜原来占用的空间水会自动填补它（绝对定位对象会让出自己原先占用位置，所以说它是奉献的）。
现在若是之前没有对水桶进行定位设定，那么被拿起的西瓜位置不会再受水桶位置影响，水桶怎么移动，西瓜仍是挂在原来位置，至于西瓜要怎放，则以房间左上角（body左上角）为准，用left，right，top，bottom值来定位。
可是若是水桶也给出了定位设置（一般是相对定位，下面有讲到这一实用技能），现在西瓜的摆放就没有那么自由了，虽然现在西瓜被拿起来了不会影响水桶中的水（文本流），但它仍是要听桶的话，桶会告知西瓜“你能够活动，但应该在我的范围内走动，例如说我要你在我左上方1米处，你就要跟死这一点，我走你也要随着走”，若是桶中有很多个西瓜，能够全数拿出来吊到半空中，它们将被安排在不同高度的空间（层），所以在房顶垂直往下看，有可能看到不同西瓜层叠在一路的情形（那个所谓的高度在网页中是不存在的，就像FLASH动画中的不同层上安排了元素，但它们在看时不会有深度感觉）。
实例演示div+css的绝对定位和相对定位布
概要：本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。
以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）这个附件demo。
)本文的示例，请看这个附件对定位块级元素进行布局的方法。
(本文的示例，请看说明：占位空间：元素在文档流中所占据的空间。
占位空间：元素在文档流中所占据的空间。
物理空间：元素本身所占据的空间。
物理空间：元素本身所占据的空间。
种情况分别对相对定位和绝对定位进行讨论：下面分3种情况分别对相对定位和绝对定位进行讨论：第一组属性布局定位元素的情况1.只使用css第一组属性布局定位元素的情况第二组属性布局定位元素的情况2.只使用css第二组属性布局定位元素的情况混合使用第一组和第二组属性的情况3.混合使用第一组和第二组属性的情况图1为未定位时的初始效果，为未定位时的初始效果，层级关系为：层级关系为：<div<div box1<div box2<div box3效果图：效果图：图1一、用相对定位布局块级元素 元素设置position 值：值： position:relative此属性值的设置，此属性值的设置，元素没有脱离文档流，元素没有脱离文档流，元素没有脱离文档流，还是普通流定位模型的一部分，还是普通流定位模型的一部分，还是普通流定位模型的一部分，会对文档流中其它会对文档流中其它元素布局产生影响。
（说明：蓝色代表占位空间，红色代表元素）元素布局产生影响。
（说明：蓝色代表占位空间，红色代表元素）1.仅使用left 、right 、top 和bottom属性布局相对定位元素的情况元素原本所占的占位空间仍保留，物理空间偏移。
元素原本所占的占位空间仍保留，物理空间偏移。
图2中，设置元素的left 和top 的值，对box2进行布局，可以发现除了box2偏移之外，其他块级元素的位置没有被影响，可见box2的占位空间还是存在的。
CSS：绝对定位布局案例position布局实例
CSS：绝对定位布局案例position布局实例<!DOCTYPE html><html><head><meta charset="utf-8"/><title>绝对定位</title><style type="text/css">@charset "utf-8";/* DIVCSS5-CSS初始化 */body, div, ul, li,h3{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif}ol, ul ,li{list-style:none}img {border: 0; vertical-align:middle}body{color:#FFF;background:#FFF; text-align:center}a{color:#000;text-decoration:none}a:hover{color:#BA2636;text-decoration:underline}/* 根据本实例设置超链接字体与没有超链接字体演⽰为⽩⾊ */#wrapper{ margin:0 auto;position:relative;width:610px;height:559px;background:url(/yanshi/2014/2014062603/images/bg.jpg) no-repeat} /* position:relative是绝对定位关键，⽗级设置 */.box1{ position:absolute; width:147px; height:140px; left:198px; top:14px}.box2{position:absolute; width:141px; height:186px; left:31px; bottom:17px}.box3{position:absolute; width:132px; height:188px; right:28px; bottom:67px}/* position:absolute是绝对定位关键，⼦级设置同时lef right top bottom配合使⽤ */h3.title{ height:32px; line-height:32px; font-size:14px; font-weight:bold; text-align:left}/* 标题统⼀设置 */ul.list{ text-align:left; width:100%; padding-top:8px}ul.list li{ width:100%; text-align:left; height:22px;overflow:hidden}/* 加了overflow:hidden防⽌内容过多后⾃动换⾏隐藏超出内容 */</style></head><body><div id="wrapper"><div class="box1"><h3 class="title">新闻动态</h3><ul class="list"><li><a href="javascript:">不会程序能学会CSS吗？</a></li><li><a href="javascript:">DIVCSS学习难吗？</a></li><li><a href="javascript:">我要参加DIVCSS5的培训</a></li><li><a href="javascript:">jQuery所以版本集合整理</a></li></ul></div><div class="box2"><h3 class="title">DIVCSS5栏⽬</h3><ul class="list"><li><a href="javascript:">CSS基础教程</a></li><li><a href="javascript:">HTML基础教程</a></li><li><a href="javascript:">CSS问题</a></li><li><a href="javascript:">CSS制作⼯具</a></li><li><a href="javascript:">DIV CSS技巧</a></li><li><a href="javascript:">DIV+CSS+JS特效</a></li></ul></div><div class="box3"><h3 class="title">⽹站栏⽬</h3><ul class="list"><li><a href="javascript:">DIV CSS⼊门</a></li><li><a href="javascript:">HTML⼊门教程</a></li><li><a href="javascript:">CSS实例</a></li><li><a href="javascript:">DIVCSS5⾸页</a></li><li><a href="javascript:">DIV CSS模块模板</a></li><li><a href="javascript:">DIV CSS WEB标准</a></li></ul></div></div></body></html>。
CSS定位（Positioning）实例
CSS定位（Positioning）实例CSS 定位和浮动CSS 为定位和浮动提供了⼀些属性，利⽤这些属性，可以建⽴列式布局，将布局的⼀部分与另⼀部分重叠，还可以完成多年来通常需要使⽤多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于⽗元素、另⼀个元素甚⾄浏览器窗⼝本⾝的位置。
显然，这个功能⾮常强⼤，也很让⼈吃惊。
要知道，⽤户代理对 CSS2 中定位的⽀持远胜于对其它⽅⾯的⽀持，对此不应感到奇怪。
另⼀⽅⾯，CSS1 中⾸次提出了浮动，它以 Netscape 在 Web 发展初期增加的⼀个功能为基础。
浮动不完全是定位，不过，它当然也不是正常流布局。
我们会在后⾯的章节中明确浮动的含义。
CSS 定位属性CSS 定位属性允许你对元素进⾏定位。
属性描述position 把元素放置到⼀个静态的、相对的、绝对的、或固定的位置中。
top 定义了⼀个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发⽣的事情。
clip 设置元素的形状。
元素被剪⼊这个形状之中，然后显⽰出来。
vertical-align 设置元素的垂直对齐⽅式。
z-index 设置元素的堆叠顺序。
############CSS position 属性通过使⽤ position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框⽣成的⽅式。
position 属性值的含义：static元素框正常⽣成。
块级元素⽣成⼀个矩形框，作为⽂档流的⼀部分，⾏内元素则会创建⼀个或多个⾏框，置于其⽗元素中。
relative元素框偏移某个距离。
元素仍保持其未定位前的形状，它原本所占的空间仍保留。
div的相对定位与绝对定位
div的相对定位与绝对定位网上也有不少使用div + css进行布局的教程，却存在很多缺陷，一是对css的布局模型讲解不清楚，让人很难理解相对定位、浮动等概念；二是虽然避免了“表格套表格”的缺点，却带来了“div 套 div”的缺点，过量使用div标签；三是class过多，造成class灾难。
要正确使用css，对css的基本知识就不能够不了解。
既然是漫谈，我这里就只讲四个方面。
一、CSS中的块模型在CSS的定义中，有的html标签被浏览器当成一个块来显示，比如div、table、p、ul等等，我们称之为块元素；有的html标签被浏览器显示在文本行之间，如a、span、font等等，我们称之为行内元素。
行内元素我这里就不讲了，只讲讲块元素的模型。
每一个块元素都可以分为context、padding、boder和margin几个部分，我们常说的宽和高，通常指的是context的宽和高(也有可能是context+padding,具体跟浏览器有关)，padding代表内容和边框之间的填充，margin代表边框之外的空白，如上图：这几个部分都是可以通过CSS进行指定的，当然，CSS还可以控制背景，因此，我们可以通过CSS来灵活控制我们页面的外观。
二、CSS中的文档流模型所有的块元素在html文档中是按照它们出现在文档中的先后顺序排列的（当然，嵌套不在此列），每一个块都会另起一行。
如下图他们对应的html如下：<div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div>为了定义他们的宽度、高度还有边框，我们定义如下的CSS：#div1 {border: 1px solid #000099;height: 60px;width: 200px;margin:2px;}#div2 {border: 1px solid #000099;height: 60px;width: 200px;margin:2px;}#div3 {border: 1px solid #000099;height: 60px;width: 200px;margin:2px;}三、CSS中的相对定位和绝对定位模型在文档流中，每个块元素都会被安排到流中的一个位置，我们可以通过CSS中的定位属性来重新安排它的位置。
详解CSS的相对定位和绝对定位
详解CSS的相对定位和绝对定位详解CSS的相对定位和绝对定位CSS/position属性position 属性规定元素的定位类型。
static 默认值；absolute 绝对定位；相对于第一个设置了除static之外祖先元素，进行定位；relative 相对定位；相对于其正常位置进行定位；fixed 绝对定位，相对于浏览器进行定位；CSS/z-index属性设置一个元素在另一个元素的上面，默认值是0，数值越大，优先级越高，可以设置负值CSS的相对定位和绝对定位通常情况下，我们元素的position属性的值默认为static 就是没有定位，元素出现在正常的文档流中，，这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的，不会生效，比如你设置一个距离左边距偏移100px的声明：left:100px 那么这条声明不会起到任何效果。
还有z-index属性在这时也不会生效。
也就是说我们平时如果不给某元素一个position属性的声明，那么它默认的就是我上述的这种情况，不过因为有了浮动，所以通常情况下我们还真不需要给元素设置position属性！但是某些特殊的情况下，我们不得不用到position属性，那我们今天就讲讲position属性的relative和absolute值首先说relative ,相对定位。
怎么理解呢？如果说我对某元素设置了相对定位，那么首先这个元素他会跟其它的元素一样，出现在文档流中它该出现的位置，然后，我们可以设置它的水平或垂直偏移量，让这个元素相对于它在文档流中的位置的起始点进行移动。
有一点要注意，在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。
这里值得注意的一点是：偏移可不是边距，跟边距是不一样的。
我们先看看下图：上图中有三个浮动的块，第二个块是设置了相对定位position:relative了的，这时大家看到它的位置并没有其它什么不同，跟其它两个块一样都处在正常的文档流中。
DIV定位用法详解
DIV定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。
如果理清了定位的原理，那DIV定位会让网页实现的更加完美。
你对DIV定位的用法是否熟悉，DIV定位一直是WEB标准应用中的难点，这里向大家简单描述一下，主要包括无定位，相对定位，绝对定位以及float|浮动对齐等内容，相信本文介绍一定会让你有所收获。
DIV定位详解1.position:static|无定位position:static是所有元素定位的默认值,一般不用注明，除非有需要取消继承的别的DIV定位example:1.#div-1{2.position:static;3.}4.2.position:relative|相对定位此为DIV定位中的相对定位，使用position:relative，就需要top,bottom,left,right4个属性来配合，确定元素的位置。
如果要让div-1层向下移动20px,左移40px:example:5.#div-1{6.position:relative;7.top:20px;8.left:40px;9.}10.如果用到相对定位，紧随他的层divafter是不会出现在div-1的下方，而是和div-1在同一个高度出现。
可见，position:relative;并不是很好用。
3.position:absolute|绝对定位此为DIV定位中的绝对定位，使用position:absolute;,能够很准确的将元素移动到你想要的位置，让我将div-1a移动到页面的右上角:example:11.#div-1a{12.position:absolute;13.top:0;14.right:0;15.width:200px;16.}17.使用绝对定位的div-1a层前面的或者后面的层会认为这个层并不存在，丝毫不影响到他们。
所以position:absolute;用于将一个元素放到固定的位置很好用，但是如果需要div-1a层相对于附近的层来确定位置就不要实现了。
css中的几种控制页面布局的定位机制（相对定位与绝对定位）
css中的⼏种控制页⾯布局的定位机制（相对定位与绝对定位） CSS中⼏种控制页⾯布局的定位机制 对于web的初学者来说，CSS中的⼏种定位⽅式经常让⼈摸不着头脑，从⽽达不到想要的页⾯布局效果，趁有时间就好好总结⼀下CSS 中的⼏种定位⽅式，也当⾃⼰再巩固⼀下。
CSS中包含三种控制页⾯布局的定位机制：普通流、相对定位、绝对定位。
在CSS中通过position属性表明定位机制。
此外还可以使⽤float属性来让元素浮动 普通流 相应语法（默认） position:static; 所谓的普通流就是根据块级元素以及内联元素⾃⾝的属性来进⾏布局，⽽不⼈为的进⾏控制。
每个块级元素都换⾏显⽰，每个项⽬都显⽰在前⼀个项⽬的下⼀⾏。
即使你制定了盒⼦的宽度，并且也有⾜够的宽度让两个元素并排显⽰，他们还是不会出现在同⼀⾏。
这是浏览器处理HTML元素的默认⽅式，不必使⽤CSS属性表明元素应该出现在普通流⾥⾯以下的所有⽰例都使⽤此HTML5代码1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Happy kitchen</title>6<link href="test.css" rel="stylesheet" type="text/css">7</head>8<body>9<div id="div1">Div1</div>10<div id="div2">Div2</div>11<div id="div3">Div3</div>1213</body>14</html>CSS代码1 body2 {3 width: 750px;4 color: black;5 }6 div7 {8 border: solid;9 width: 400px;10 height: 200px;11 text-align: center;12 }13 #div114 {15 background-color: red;16 }17 #div218 {19 background-color: green;2021 }22 #div323 {24 background-color: blue;25 }效果图： 相对定位 相应语法 position:relative 相对定位将⼀个元素从它在普通流所处的位置上进⾏移动，并且这种移动不会影响周围元素的位置，它们还是处于在普通流中所处的位置。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
概要：本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。
以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。
(本文的示例，请看这个附件demo。
) 说明：占位空间：元素在文档流中所占据的空间。
物理空间：元素本身所占据的空间。
下面分3种情况分别对相对定位和绝对定位进行讨论：1.只使用css第一组属性布局定位元素的情况2.只使用css第二组属性布局定位元素的情况3.混合使用第一组和第二组属性的情况图1为未定位时的初始效果，层级关系为：<div<div box1<div box2<div box3效果图：图1一、用相对定位布局块级元素元素设置position值：position:relative此属性值的设置，元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中其它元素布局产生影响。
（说明：蓝色代表占位空间，红色代表元素）1.仅使用left、right、top和bottom属性布局相对定位元素的情况元素原本所占的占位空间仍保留，物理空间偏移。
图2中，设置元素的left和top的值，对box2进行布局，可以发现除了box2偏移之外，其他块级元素的位置没有被影响，可见box2的占位空间还是存在的。
层级关系为：<div<div box1<div box2 ——– position:relative ; top:-60px; left:80px;<div box3效果图：图22.仅使用margin属性布局相对定位元素的情况用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度，会影响文档流中的其它元素位置。
例如：margin-top:负值; margin-bottom:负值图3中，box1和box2都设置了元素margin-bottom的值，值等于它们高度的负值。
box1和box2物理空间没有改变，占位空间高度为0。
box3的margin-bottom值设置为0，物理空间没有改变，占位空间高度不变。
再通过margin-left对box2和box3设置左偏移值。
层级关系为：<div<div box1 ——– position:relative ; margin-bottom:-102px;<div box2 ——– position:relative ; margin-bottom:-102px; margin-left:110px; <div box3 ——– position:relative ; margin-bottom:0px; margin-left:220px;效果图：图33.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况此情况，它们的值会产生累加的效果。
在CSS2.1中所有的浏览器都使用外边距边界来完成偏移计算。
本文从数学的角度理解为偏移属性值和外边距属性值累加。
图4中，box2是在图3的基础上增加设置left的值产生的效果，可见margin-left 的值和left的值产生了累加。
(偏移量:80px = 110px - 30px)层级关系为：<div<div box1 ——- position:relative ; margin-bottom:-102px;<div box2 ——- position:relative ; margin-bottom:-102px;margin-left:110px; flet:-30px;<div box3 ——- position:relative ; margin-bottom:0px; margin-left:220px; 效果图：图4二、用绝对定位布局块级元素设置position值：position:absolute;此属性值的设置，元素从文档流完全删除。
1.仅使用left、right、top和bottom属性布局绝对定位元素的情况绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。
如果元素没有已定位(包括相对定位和绝对定位)的祖先元素，那么它的参照物为最顶级元素（由于浏览器的默认参照物不同，物可能是BODY或HTML 元素）。
注意：IE下参照物需设置宽度或高度bottom和right属性才可以正确的定位。
设置元素为绝对定位元素后，元素的Left、Right、Top和Bottom属性默认值不是0，只是将元素脱离文档流。
以下例子说明这个问题。
在图5中，将橘黄色的祖先元素设置为定位元素（即参照物），box2设为绝对定位，文档流由box1-box2-box3变为box1-box3，可box2却没有移动到距离参照物0值的位置上，可见box2的Left、 Right、Top和Bottom属性默认值不等于0，它只是脱离了文档流而已。
层级关系为：<div ———————————position:relative 参照物<div—————————-没有设置为定位元素，不是参照物<div———————-没有设置为定位元素，不是参照物<div box1<div box2 ——–absolute<div box3效果图：图5以最近的祖先定位元素为参照物的情况图6中，Box2设置成绝对定位元素，脱离了文档流，文档流由box1-box2-box3变为box1-box3，box2以最近的定位祖先（蓝色框）为参照物。
层级关系为：<div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物<div—————————-没有设置为定位元素，不是参照物<div———————- position:relative 参照物<div box1<div box2 ——–position:absolute; top:50px; left:120px;<div box3效果图：图6图7中，为改变参照物（橘色框）后的效果层级关系为：<div ——————————— position:relative;最近的祖先定位元素，参照物 <div—————————-没有设置为定位元素，不是参照物<div———————-没有设置为定位元素，不是参照物<div box1<div box2 ——–position:absolute; top:50px; left:120px;<div box3效果图：图7图8中，参照物为最顶级的元素情况。
层级关系为：<div ———————————没有设置为定位元素，不是参照物<div—————————-没有设置为定位元素，不是参照物<div———————-没有设置为定位元素，不是参照物<div box1<div box2 ——–position:absolute; top:50px; left:120px; <div box3效果图：图82.仅使用margin属性布局绝对定位元素的情况此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。
另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
图9中，使用margin属性布局相对定位元素。
层级关系为：<div ——————————— position:relative; 不是参照物<div—————————-没有设置为定位元素，不是参照物<div———————-没有设置为定位元素，不是参照物<div box1<div box2 ——–position:absolute; margin-top:50px; margin-left:120px; <div box3效果图：图9IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。
层级关系为：<div ——————————— position:relative; 不是参照物<div—————————-没有设置为定位元素，不是参照物<div———————-没有设置为定位元素，不是参照物<div box1<div box2 ——–position:absolute; margin-top:50px; margin-left:60px; <div box3效果图：图103.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况a.margin属性和top、bottom、left、right属性同时使用，如果同一方向偏移，它们的值会产生累加的效果，见图11。
例如：margin-left:120px; left:-20px; 那么box2的偏移值为120px-20px=100px; 层级关系为：<div ———————————-不是参照物<div—————————–不是参照物<div———————–position:relative; 参照物<div box1<div box2 ———position:absolute; margin-left:120px; left:-20px;top:50px;<div box3效果图：图11b.绝对定位和相对定位的累加加效果不同，如果top、bottom、left、right属性和margin属性偏移的方向相反，top、bottom、left、right属性值有效，反方向的margin 属性值无效，见图12。
层级关系为：<div ———————————-不是参照物<div—————————–不是参照物<div———————–position:relative; 参照物<div box1<div box2 ———position:absolute; margin-left:120px; right:10px;top:50px;<div box3效果图：图12总结：∙相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。
∙绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，Left; Right; Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属性值无效。