本小节的标题是盒子的定位，实际上对于使用CSS对网页布局这个大主题来说．“定位”这个词本身有两种含义。
● 广义的“定位”：要将某个元素故到某个位置的时候，这个动作可以称为定位操作，可以使用任何CSS规则来实现，这就是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样存在定位的问题。
● 狭义的“定位”：在CSS中有一个非常重要的属性position，这个单词翻译为中文也是定位的意思，然而受使CSS进行定位操作并不仅仅通过这个属性来实现，因此不要把二者混淆。
首先，对position属性的使用方法做一个概述，后面再具体举例子说明。position属性可以设置为4个属性值之一。
● static:这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。
● reIative：称为相对定位。使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。
● absolute:绝对定位，盒子的位置以它的包含框为基准进行偏移。，绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。
● fixed:称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。
读者可能会觉得这4条属性值不太易于理解，这一节的任务就是彻底搞懂它们的含义。
position定位与float-样，也是CSS排版中非常重要的概念。position从字面意思上看就是指定块的位置，即块相对于其父块的位置和相对于它自身应该在的位置。
一、static（静态定位）
static为默认值，它表示块保持在原本应该在的位置上，即该值没有任何移动的效果。因此，前面的所有例子实际上都是static方式的结构，这里就不再介绍了。
为了讲解清楚后面的其他比较复杂的定位方式，也像上一节一样，使用一系列实验的方法，目标是通过实验的方法找出规律。
这里首先给出最基础的代码，也就是没有设置任何position属性，相当于使用staLic方式的页面．，相应的文件位于网页学习网CSS教程资源中“第4章\09.htm”。
<!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>网页学习网--position属性</title>
<style type="text/css">
body{
margin:20px;
font :Arial 12px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
padding:15px;
}
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
}
</style>
</head>
<body>
<div id="father">
<div id="block1">Box-1</div>
</div>
</body>
</html>
这个页面的效果如图1所示，这是一个很简单的标准流方式的两层的盒子。
图1 没有设置position属性时的状态
二、relative（相对定位）
使用relative，即相对定位，除了将position属性设置为relative之外，还需要指定一定的偏移量，承平方向通过left或者right属性来指定，竖直方向通过top和bottom来指定。下面还是通过实验的方式找到其中的规律。WANGYEXX.COM
1．实验1——个子块的情况
下面在CSS样式代码中的Box-I处，将position属性设置为relative，并设置偏移距离，代码如下。
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:relative; /* relative相对定位 */
left:30px;
top:30px;
}
效果如图2所示，相应的文件位于本书光盘中“第4章\10.htm”。图中显示了Box-1原来的位置和新位置的比较。可以看出，它向右和向下分别移动了30像素。也就是说，“left:30px”的作用就是使Box-1的新位置在它原来位置的左边框右侧30像素的地方，“top:30px”的作用就足使Box-1的新位置在原来位置的上边框下侧30像素的地力。
图2 一个div设置为相对定位后的效果
这4个属性只有当position属性设置为absolute、relative或fixed时才有效。而且，在position属性取值不同时，它们的含义也不同。当posiition设置为relative时，它们表示各个边界与原来位置的距离。
top、right、bottom和left这4个属性除了可以设置为绝对的像素数，还可以设置为百分数。此时，可以看到子块的宽度依然是未移动前的宽度，撑满未移动前父块的内容。只是向右移动了，右边框超出了父块。因此，还可以得出另一个结论，当子块使用相对定位以后，它发生了偏移，即使移动到了父盒子的外面，父盒子也不会变大，就好像子盒子没有变化一样。
类似地，如果将偏移的数值设置为：
right:30px;
bottom:30px;
效果如图2所示。
图2 以右侧和下侧为基准设置相对定位
对于父块来说，同样没有任何影响，就好像子块没有发生过任何改变一样。因此可以总结出以下两条结论。
● 使用相对定位的盒子．会相对于它原本的位置，通过偏移指定的距离，到达新的位置。
● 使用相对定位的盒子仍在标准流中，它对父块没有任何影响。
2．实验2——两个子块的情况
下面讨论两个子块的情况。把上面的网页稍加改造，在父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>
<meta http-equiv="Content-Language" content="zh-cn" />
<title>网页学习网--position属性</title>
<style type="text/css">
<!--
body{
margin:20px;
font-family:Arial;
font-size:12px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
padding:15px;
}
#father div{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
}
#block1{
}
#block2{
}
-->
</style>
</head>
<body>
<div id="father">
<div id="block1">Box-1</div>
<div id="block2">Box-2</div>
</div>
</body>
</html>
这时效果如图3所示，相应的文件位于网页学习网CSS教程资源中“第4章\11.htm“。
图3 设置为柑对定位前的效果
在代码中可以看到，现在对两个子块的设置都还空着。下面首先将Box-1盒子的CSS设置为；
#block1{
position:relative;
bottom:30px;
right:30px;
}
将子块1的position属性设置成relative，子块2还没有设置任何与定位相关的属性。此时的效果如图3所示，与前面的图3对比，可以看到子块1的位置以自身为基准向上和向左各偏移了30像素。而子块2和前面的图3所示的相比没有任何变化，就好像子块1还在原来的位置上。
图4 两个兄弟div的情况下，其中一个设置为相对定位后的效果
这又一次验证了前面实验I中总结出的两条结论，并且需要把第2条结论再稍稍改进。因为，使用相对定位的盒子不仅对父块没有任何影响，对兄弟盒子也没有任何影响。至此，可以总结出，对于相对定位的规律是：
● 使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置。WANGYEXX.COM
● 使用相对定位的盒子仍在标准流中，它对父亲和兄弟盒子都没有任何影响。
如果同时设置两个子块的position属性都为relative，情况又会如何呢？现在把子块2也进行相应的设置，代码如下。
#block2{
position:relative;
top:30px;
left:30px;
}
这时的效果如图5所示，相应的文件位于网页学习网CSS教程资源中“第4章\12.htm“。
图5 两个兄弟div都设置为相对定位后的效果
3．结论
这继续验证了上面总结的两条结论，请读者记清楚关于“相对定位”的定位原则：
● 使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置。
● 使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。
需要指出的是，上面的实验是针对标准流方式进行的，实际上，对浮动的盒子使用相对定位也是一样的，例如在4.1节中显示的3个浮动的盒子，它们都向左浮动排在一行中，如果对其中的一个盒子使用相对定位，它也同样相对于它在原本的位置，通过偏移指定的距离，到达新的位置，它旁边的Box-3仍然“以为”它还在原来的位置。
本文地址:http://www.wangyexx.com/css/jc/675.html
分享到：
相关推荐
### CSS全科教程知识点概述 #### 一、CSS基础 **1.1 CSS简介** - **基础知识需求**：在深入CSS的学习之前，建议先掌握HTML和XHTML的基础知识。 - **CSS概述**：CSS（Cascading Style Sheets），即层叠样式表，是...
4.2 盒子的定位 4.2.1 static（静态定位） 4.2.2 relative（相对定位） 4.2.3 absolute（绝对定位） 4.2.4 fixed（固定定位） 4.3 z-index空间位置 4.4 盒子的display属性 4.5...
4.1.7 实验6——全部向左浮动 4.1.8 实验7——使用clear属性清除浮动的影响 4.1.9 实验8——扩展盒子的高度 4.2 盒子的定位 4.2.1 static（静态定位） 4.2.2 relative（相对定位） 4.2.3 absolute...
4.2 盒子的定位 4.2.1 static（静态定位） 4.2.2 relative（相对定位） 4.2.3 absolute（绝对定位） 4.2.4 fixed（固定定位） 4.3 z-index空间位置 4.4 盒子的display属性 4.5 本章小结 第5章 ...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一：轻轻松松给图片签名 10.5 定位实例二：文字阴影效果 第11章 CSS+div布局...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一：轻轻松松给图片签名 10.5 定位实例二：文字阴影效果 第11章 CSS+div...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一：轻轻松松给图片签名 10.5 定位实例二：文字阴影效果 第11章 CSS+div布局...
3.1 使用Flexbox：弹性盒子模型提供了更灵活的方式来对齐和分布容器中的项目。 3.2 使用CSS transform：transform属性可以实现元素的平移、旋转、缩放和倾斜。 3.3 使用margin: 0 auto;：该属性常用于水平居中块级...
本篇主要介绍了CSS3中的几个新特性，包括圆角边框、盒子阴影和文字阴影，以及浮动布局的相关知识。圆角边框通过`border-radius`属性实现，可使元素边框呈现圆角效果；盒子阴影使用`box-shadow`属性，能为元素添加...
网页布局的核心是利用CSS对这些盒子进行精确的定位和样式设置。 ##### 1.2 盒子模型组成 CSS盒子模型是理解网页布局的基础。它将每个HTML元素视为一个矩形盒子，这个盒子由以下几部分组成： - **边框（Border）**...
定位是CSS中用于控制元素位置的一种方式。`position`属性用于定义元素的定位模式，而`top`、`bottom`、`left`和`right`属性则用于精确调整定位元素的位置。 **4.2 position属性的常用值** - **static**: 默认值，...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一：轻轻松松给图片签名 10.5 定位实例二：文字阴影效果 第11章 CSS+div布局...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一：轻轻松松给图片签名 10.5 定位实例二：文字阴影效果 第11章 CSS+div布局...
4.2 盒子模型 4.3 元素的定位 4.3.1 float定位 4.3.2 position定位 4.3.3 z-index空间位置 4.4 CSS排版观念 4.4.1 将页面用div分块 4.4.2 设计各块的位置 4.4.3 用CSS定位 4.5 排版...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一：轻轻松松给图片签名 10.5 定位实例二：文字阴影效果 第11章 CSS+div布局...
本教程将带你深入理解CSS的基础概念，让你快速入门网页前台界面的样式设计。 一、CSS简介 1.1 CSS的起源与作用 CSS最初由伯纳德·洛伊·伯特和哈肯·维姆勒在1994年提出，其主要目标是使内容与表现分离，使得内容...