题外话：
三军统帅，征战沙场。运筹帷幄之中，决胜千里之外。好不痛快淋漓！
吾等不列行伍之中，无法感于此等尽兴与酣畅。而每日面对程序，能够畅快的游弋于各种对象与元素之间，使之誓死听命于自己，这岂不是与战场上的酣畅有着异曲同工之妙呢？
既然我们注定成为不了将军，那就努力让我们在自己的地盘上“称王称霸”吧！再借用一句广告语：我的地盘我做主！这也就是这篇文章我这样命名的用意。
进入正文：
div+css用于网页布局似乎已经流行了很久很久了，可固执的我从骨子里似乎对它就有抵触情节，一方面对之轻视，一方面每每遇到它又被其折磨的痛苦不堪。痛定思痛，决定对它潜心研究一下，将其玩弄于股掌之间！
网上搜了搜div定位相关的内容，大多是从表面上介绍一些使用上的规律，很少有描述为什么如此的文章。于是，便引发了我想写这样一篇文章的冲动。
说到页面元素的定位，就不得不首先提起文档流的概念。
关于文档流，我并没有在网络或书籍上找到一个确切的定义。在此，我只能说说我个人对其的认识。
所谓文档流，即为页面元素自上而下、从左到右的排列次序，如同线性的流一般。我们在编写页面时，也基本上是按照这样的一个顺序来安置各种元素。如果我们没有对div指定定位方式的话，浏览器就会按照其在文档流中的次序进行显示。如：
|
以下为引用的内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>div定位测试</title>
</head>
<body>
<div id ="divFirst" style ="width:400px; height:50px;background-color:#FF00FF;">这里是divFirst</div>
<div id ="divSecond" style ="width:400px; height:50px;background-color:#01DFD7;">这里是divSecond</div>
<p><font color="#FF0000">*</font> 在普通的文档流中，div块级元素是自上而下依次排列的</p>
</body>
</html>
|
上述代码中，两div并未采取任何的定位方式，浏览器按普通文档流的方式对其显示，以下是显示效果：
下面我们就来详细的说说div定位的关键的两个步骤。
首先，我们要判断被定位元素是否脱离普通文档流。是否脱离文档流将会影响文档流中其余元素的定位。
对于脱离了文档流的元素，其显示已经不再受普通文档流的束缚，而文档流中的其余元素的定位就如同该元素已经不在页面上一样。
而对于未脱离文档流的元素，其无论偏移到了页面的何处，实际上占据的仍然是其原来的位置。文档流中的其余元素定位时，也就会相应的留出该元素的位置。
在几种定位方式中，position:absolute和float是脱离文档流的，而position:relative不会使被定位的对象脱离普通的文档流。下面我们来举例说明：
|
以下为引用的内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>div定位测试2</title>
</head>
<body>
<div id ="divFirst" style ="width:400px; height:50px;background-color:#FF00FF;">这里是divFirst</div>
<div id ="divSecond" style ="width:400px; height:50px;background-color:#01DFD7; position:absolute; top:20px; left:50px;">这里是divSecond</div>
<div id ="divThird" style ="width:400px; height:50px;background-color:#FFFF00;">这里是divThird</div>
</body>
</html>
|
|
以下为引用的内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>div定位测试3</title>
</head>
<body>
<div id ="divFirst" style ="width:400px; height:50px;background-color:#FF00FF;">这里是divFirst</div>
<div id ="divSecond" style ="width:400px; height:50px;background-color:#01DFD7; position:relative; top:20px; left:50px;">这里是divSecond</div>
<div id ="divThird" style ="width:400px; height:50px;background-color:#FFFF00;">这里是divThird</div>
</body>
</html>
|
以上两示例代码中，唯一一处区别就是divSecond一个采用absolute定位，另一个采用relative定位。这就会导致很大的不同，见下图：
divSecond采用absolute定位的效果
divSecond采用relative定位的效果
divSecond采用absolute定位的页面中，原来位于divSecond下的divThird上移将其的位置占据；而采用relative定位的页面中没有出现这样的情况。
其次，确定被定位元素偏移的参照物。找准参照物，被定位元素的位置也就明晰了。
由position:absolute定位的元素参照的对象是其最近的已定位（包括position:absolute和position:relative两种方式）的祖先元素（祖先元素即位于外层，嵌套其的元素），若该祖先元素不存在，则其参照最初的包含块，如页面画布。float和position:relative两种定位方式参照的是被定位元素在普通文档流中的原本的位置。
被position:absolute和position:relative定位的元素，其偏移量由top、left、bottom和right确定。float定位指示了其是向右（right）、向左（left），还是同时向左右（both）漂移。以下为示例：
|
以下为引用的内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>div定位测试2</title>
</head>
<body>
<div id ="divFirst" style ="width:400px; height:100px;background-color:#FF00FF;">这里是divFirst</div>
<div id ="divSecond" style ="width:400px; height:100px;background-color:#01DFD7;">这里是divSecond</div>
<div id ="divThird" style ="width:400px; height:100px;background-color:#FFFF00;">这里是divThird</div>
<div id ="divFourth" style ="width:400px; height:100px;background-color:#01DF01;">
<div id ="divFifth" style ="width:100px; height:20px;background-color:#FF8000; top:20px; left:60px; position:absolute;">这里是divFifth</div>
</div>
</body>
14</html>
|
以上代码中divFifth采用了absolute定位，其运行效果图为：
很明显，因divFifth无已定位的祖先元素，其参考物为页面画布。如果divFifth采用relative定位，其显示效果又是什么样呢？见下图：
如此，divFifth的定位参照物便是其原来在普通文档流中的位置。
好了，就写到这吧！至于采用float定位时参照物的选择，请读者自己去尝试吧！
此篇文章中介绍的对div的定位分析，同样适用于 p 、ul 等块状元素。相信你看了这篇文章后，一定会对元素定位有一个全新的认识，进而将其玩弄于股掌之间。 最后附上一张关于定位的总结表格：
更多了解、更多交流：回钦波[转]
QQ:444084929
相关推荐
本书"玩转Python网络爬虫"旨在帮助读者深入理解和掌握Python爬虫技术，通过源码学习可以更直观地理解爬虫的工作原理和实现细节。 在Python中，最常用的爬虫库包括requests和BeautifulSoup，它们分别用于发送HTTP...
以上内容涵盖了H5基础及高级的相关知识点，包括内联元素与块元素的区别、内联块的应用、玩转浮动技巧、定位详解以及浏览器兼容性的处理方法。希望这些信息能够帮助你更好地理解和掌握HTML5与CSS的相关知识。
第2篇 玩转设计 第3章 图像样式设计 86 3.1 图像边框 87 3.2 图像阴影效果 91 3.3 图像替代文本 96 3.4 图片裁剪 98 3.5 制作图像走廊 100 3.6 小结 106 第4章 链接样式设计 107 4.1 链接样式 108 4.1.1 a:link 108 ...
这里首先定义一个view（类比html中的div），给它加上一个view叫做view-triangle，主要是用来给它自身定义背景，宽高，并且需要加上相对定位，因为它里面的三角符号需要在它的基础上进行绝对定位； 在这个view ...
通过`<div>`元素定位和`<style>`标签内嵌的CSS样式，实现了元素的绝对定位、尺寸设定和背景颜色设置。例如，游戏主区域`#game`设置了宽度、高度、背景色及位置属性，确保游戏界面的清晰和美观。 #### JavaScript...
【Web网页设计制作-毕业设计期末大作业】俄罗斯方块网页游戏源码是一个典型的Web开发项目，它结合了HTML、CSS、JavaScript等技术，用于创建一个可在浏览器中玩的在线俄罗斯方块游戏。这个项目可以帮助学生掌握网页...
这可以通过CSS的背景定位和绝对定位来实现，每个拼图块都是一个带有背景图片的div元素，其背景图片部分对应原图的一块。 2. 随机打乱：使用JavaScript的数组方法`shuffle()`打乱拼图块的顺序。这个方法可以基于...
通过设置盒模型、定位、过渡和动画属性，可以实现图标翻转、消除时的动态效果，增强游戏体验。 4. **内置声音**：游戏可能使用了HTML5的`Audio`对象来播放各种音效，例如点击声、消除声、失败提示音等。通过...
此外，为了增加游戏的可玩性和多样性，开发者还可以添加额外的功能，如难度级别选择（影响卡片数量）、时间限制、提示系统等。这些功能的实现需要扩展JavaScript代码，可能涉及数组操作、计时器和随机数生成等编程...
此外，为了增加游戏的可玩性，开发者可能还会引入AI控制的对手赛车，通过JavaScript实现AI算法，让它们根据赛道情况和玩家的行动做出反应。这涉及到路径规划、速度调整等复杂计算。 总的来说，"CarRace"这个简单的...