Div + CSS 进行网页布局，适当地运用 absolute 与 relative，能给布局带来意想不到的效果和方便，达到事半功倍…本文介绍了关于 absolute 与 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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Div + CSS Example, Wayhome's Blog</title>
<style type="text/css">
<!--
body,td,th{font-family:Verdana;font-size:9px;}
-->
</style></head>
<body>
<div style="position:absolute; top:5px; right:20px; width:200px; height:180px; background:#00FF00;">
position: absolute;<br />
top: 5px;<br />
right: 20px;<br />
<div style="position:absolute; left:20px; bottom:10px; width:100px; height:100px; background:#00FFFF;">
position: absolute;<br />
left: 20px;<br />
bottom: 10px;<br />
</div>
</div>
<div style="position:absolute; top:5px; left:5px; width:100px; height:100px; background:#00FF00;">
position: absolute;<br />
top: 5px;<br />
left: 5px;<br />
</div>
<div style="position:relative; left:150px; width:300px; height:50px; background:#FF9933;">
position: relative;<br />
left: 150px;<br />
<br />
width: 300px; height: 50px; <br />
</div>
<div style="text-align:center; background:#ccc;">
<div style="margin:0 auto; width:600px; background:#FF66CC; text-align:left;">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<div style="padding:20px 0 0 20px; background:#FFFF00;">
padding: 20px 0 0 20px;
<div style="position:absolute; width:100px; height:100px; background:#FF0000;">position: <span style="color:#fff; ">absolute</span>;</div>
<div style="position:relative; left:200px; width:500px; height:300px; background:#FF9933;">
position: <span style="color:blue;">relative</span>;<br />
left: 200px;<br />
<br />
width: 300px;<br />
height: 300px;<br />
<div style="position:absolute; top:20px; right:20px; width:100px; height:100px; background:#00FFFF;">
position: absolute;<br />
top: 20px;<br />
right: 20px;<br /></div>
<div style="position:absolute; bottom:20px; left:20px; width:100px; height:100px; background:#00FFFF;">
position: absolute;<br />
bottom: 20px;<br />
left: 20px;<br />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
absolute：绝对定位，CSS 写法“ position: absolute; ”，它的定位分两种情况，如下：
1. 没有设定 Top、Right、Bottom、Left 的情况，默认依据父级的“内容区域原始点”为原始点，上面例子红色部分(父级黄色区域有 Padding 属性，“坐标原始点”和“内容区域原始点”不一样)。
2. 有设定 Top、Right、Bottom、Left 的情况，这里又分了两种情况如下：
(1). 父级没 position 属性，浏览器左上角(即 Body)为“坐标原始点”进行定位，位置由 Top、Right、Bottom、Left 属性决定，上面例子绿色部分。
(2). 父级有 position 属性，父级的“坐标原始点”为原始点，上面例子浅蓝色部分。
relative：相对定位，CSS 写法“ position: relative; ”，参照父级的“内容区域原始点”为原始点，无父级则以 Body 的“内容区域原始点”为原始点，位置由 Top、Right、Bottom、Left 属性决定，且有“撑开或占据高度”的作用，上面例子橙色部分。
通过上面的例子和讲解，相信熟练运用 absolute 与 relative 并不是一件很困难的事，我们周围有不少关于 absolute 与 relative 的好例子，比如“网易163免费邮”首页(http://mail.163.com)，里面就有大量的运用。
例子代码在 IE5.5、IE6、FF1.5、Opera9 测试通过。
分享到：
相关推荐
`position`属性有多个可选值，其中`absolute`和`relative`是两个最常使用的值，它们在网页设计中扮演着关键角色。 **一、position: static** 这是所有元素的默认定位方式。`static`定位遵循正常的文档流，即元素会...
总之，通过本文的介绍，我们可以了解到CSS中的absolute与relative定位方式的区别和它们各自的应用场景，它们在网页布局中的运用能够有效地解决布局问题并创造丰富的视觉效果。对于前端开发者而言，灵活运用这两种...
本案例中涉及到的是`position`属性的两个值：`relative`和`absolute`，它们在li标签的应用中起到了决定性的作用。 首先，我们来看`position: relative;`。当一个元素的`position`属性设置为`relative`时，它会相...
然而，需要注意的是，`position:relative`可能会改变元素的大小计算方式，尤其是在与`absolute`或`fixed`定位的子元素一起使用时。如果父元素设置了`position:relative`，并且有绝对定位的子元素，那么子元素的定位...
相反，它会相对于最近的已定位祖先元素（即拥有非`static`定位的父元素，如`relative`、`absolute`或`fixed`）进行定位。如果没有这样的祖先，元素将相对于浏览器窗口或视口（初始包含块）定位。 下面是一个简单的...
《CSS position属性详解：absolute, relative及其他值》 在网页设计中，CSS（层叠样式表）的position属性是至关重要的，它决定了元素在页面上的布局方式。position属性有五个基本值：static、relative、absolute、...
在MATLAB开发中，"absolutepath"是一个与文件路径操作相关的重要概念。它涉及到计算机科学中的文件系统和程序的路径处理。MATLAB提供了一系列的内置函数来处理路径问题，其中`absolutepath`函数是用于将相对路径转换...
`以及与之相关的其他定位方式。 首先，我们来看`position`属性的四种主要值： 1. **static**：这是元素的默认定位方式，元素按照正常的文档流排列，不受到`top`, `bottom`, `left`, `right`属性的影响。在CSS中，...
本文将深入探讨position属性中的relative用法，帮助开发者更好地理解和运用这一特性。 首先，我们需要理解position属性的基本概念。在CSS中，position属性用于指定元素的定位类型。其默认值为static，表示元素按照...
此外，absolute定位的元素会被从正常的文档流中移除，这意味着它们不会在页面上留下空白，其他元素会忽略绝对定位的元素，就像它们不存在一样，这是与fixed定位的一个主要区别。而fixed定位的元素虽然也会被移出正常...
5. **子绝父相（Child Absolute Parent Relative）**：这是一种常见的定位组合，父元素使用`position: relative;`，子元素使用`position: absolute;`，子元素的位置相对于父元素进行定位，常用于创建精准的布局效果...
本篇文章将深入探讨CSS中的四种定位方式：static、relative、absolute和fixed，以及它们在实际应用中的差异。 首先，`static`是所有元素的默认定位方式。在这种模式下，元素按照正常的HTML流顺序排列，不考虑任何...
### CSS中的定位详解 #### CSS定位机制概述 CSS（层叠样式表）为网页...通过合理运用不同的定位方式，可以轻松实现诸如多列布局、弹出窗口、导航栏等高级功能。理解并掌握这些定位概念对于提高Web开发效率至关重要。
### inline与line-height、float、absolute的故事 #### 前言 在前端开发的过程中，我们经常需要处理元素的样式和布局。其中，行内元素（inline）、`line-height`、浮动（float）以及绝对定位（absolute）是非常重要...
【深入理解CSS布局之定位与浮动】 在CSS布局中，定位和浮动是两个非常关键的概念，它们能够帮助开发者实现复杂的网页布局和设计效果。本文将详细介绍这两个概念以及它们在实际应用中的工作原理。 1. **文档流** -...
Web 页面中的 Layer 运用 Layer 概念在 Web 页面中的应用，是一种高效简捷的方法，可以增强页面层次的独立可操作性，方便地得到效果很好的整体图像。在 Web 页面中，Layer 可以通过 HTML 和 CSS 来实现，具有很强...
本次设计魅族官网主要运用...多出使用了定位元素position: relative;——position: absolute;使用了多个：hover效果来实现变化。能够巩固熟悉浮动、相对定位，绝对定位、下拉列表、hover效果、整体缩放等知识点的用法。
它可以取五个不同的值：`static`、`relative`、`absolute`、`fixed`和`inherit`。 - **static**：默认值，无特殊定位，元素按照正常文档流布局。 - **relative**：相对于自身初始位置进行偏移，但仍保持所占的空间...