-
相对定位
相对定位是按照元素自身所在的位置，使用边偏移属性重新定义元素的显示位置，使用相对定位的元素依然是文档中的元素，元素的显示位置和元素所在文档中其他元素相互关联。
在确定相对定位元素位置的时候，首先要确定元素的原始位置，即元素在文档中的位置，然后根据偏移属性中定义的偏移值，确定元素的最终位置。
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#aa{
width:100px;
height:100px;
background-color:#d5d5d5;
}
#bb{
width:100px;
height:100px;
background-color:#FF0000;
position:relative;
left:40px;
}
</style>
</head>
<body>
<div id="main">
<div id="aa"></div>
<div id="bb"></div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#aa{
width:100px;
height:100px;
background-color:#d5d5d5;
}
#bb{
width:100px;
height:100px;
background-color:#FF0000;
position:relative;
left:40px;
top:50px;
}
#cc{
width:100px;
height:100px;
background-color:#D9E021;
}
</style>
</head>
<body>
<div id="main">
<div id="aa"></div>
<div id="bb"></div>
<div id="cc"></div>
</div>
</body>
</html>
从上图可以看出，使用相对定位的元素按照自身所在的位置进行偏移。
在使用相对定位到时候，相对定位元素保留原来所占有的空间，同时自身按照边偏移属性中定义的属性值进行偏移（有可能覆盖其他元素），
与相对定位元素相邻的元素会将相对定位元素进行排列。
从上图看出，与相对定位元素相邻的元素的显示方式，会保留相对元素原来占有的空间，使用相对定义的元素，由于其显示级别高于
普通元素，所以相对定位元素覆盖了普通页面元素。
2. 绝对定位
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样：
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
注意：（1）相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
（2）因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
相关推荐
css相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在她所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素"相对于"它的起点进行移动。 如果将top设置为20px，那么框...
css相对定位使用示例 css相对定位是css中的一种基本定位方式，它的特点是相对某个对象进行偏移，而不是相对文档流。相对定位的对象仍然会保留它在文档流中的位置，而不是脱离文档流。 基本概念： 相对定位...
总的来说，CSS相对定位是网页布局的基础，而JavaScript则提供了动态定位和交互的能力。通过结合两者，开发者可以创建出更丰富、更具交互性的网页体验。在实际项目中，理解和运用这些定位技术是提升用户体验的关键。...
CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 如果将 top 设置为 20px，...
本文实例讲述了JS+CSS相对定位实现的下拉菜单。分享给大家供大家参考。具体如下： 这里使用的是相对定位，不过效果还可以，用时候再修整一下，这个只是实现了大概功能，还有许多细节没有修饰。 运行效果截图如下： ...
### CSS定位详解：绝对定位与相对定位 #### 相对定位（Relative Positioning） 相对定位是一种常见的CSS定位方式，它允许元素相对于其正常位置进行偏移。这种定位不会影响其他元素的位置。 - **定义**: 当元素...
浮动、绝对定位和相对定位是CSS中的关键概念，它们对于创建复杂的网页布局至关重要。本讲座将深入探讨这些概念，帮助您理解何时及如何有效地使用它们。 1. CSS 浮动（Float） 浮动最初是为了实现文本环绕图像而引入...
本教程将深入探讨两种主要的定位方式：相对定位和绝对定位，这两种方法在DIV+CSS布局中尤其常用。 1. 相对定位（relative） 相对定位是CSS定位的基础，它保持元素在正常文档流中的位置，但允许通过`top`、`right`、...
绝对定位和相对定位是两种常用的定位技术，它们在网页设计中扮演着至关重要的角色。本教程将深入探讨这两个概念，以及如何在实践中有效利用它们。 ### 绝对定位 绝对定位允许一个元素相对于其最近的非静态定位祖先...
1.CSS背景试验1.doc 2.CSS背景试验2.doc 3.CSS颜色.doc 4.CSS文字.doc ...11.CSS相对定位.doc 12.CSS垂直定位.doc 13.CSS尺寸.doc 14.CSS显示.doc 15.CSS可视性.doc 16.CSS浮动.doc 17.CSS清除浮动.doc
本讲主要探讨的是CSS3中的相对定位（Relative Positioning）。 相对定位是CSS定位模式的一种，它允许我们将元素相对于其原始在文档流中的位置进行偏移。相对定位的特点在于，即使元素的位置发生了改变，但它仍然...
有了这个就可以搞定很多事情 在“CSS规则对话框”中，我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置，来美化我们的页面，当然啦，我们在定义某个...还有【CSS定位详解之绝对定位和相对定位】哦
CSS提供了多种定位方式，包括静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。静态定位是元素的默认定位方式，不改变元素在文档流中的位置。相对定位则...
在探讨CSS控制div在网页中的位置这一主题时，我们聚焦于两种主要的定位技术：CSS绝对定位和CSS相对定位。这两种方法在网页设计中扮演着关键角色，尤其当设计师需要精确控制元素位置时。 ### CSS绝对定位（Absolute ...
CSS中的定位机制包括静态定位、相对定位、绝对定位和固定定位。在这里，我们将主要探讨相对定位，它是初学者必须掌握的基础概念。 相对定位（Relative Positioning）是一种允许元素在原有位置基础上进行偏移的定位...
定位模式包括静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。边偏移属性则涉及top、bottom、left和right，用于控制元素在页面上具体位置的偏移量。 静态定位是默认的定位方式，元素...
CSS提供了多种定位方式，包括静态定位（static）、相对定位（relative）、绝对定位（absolute）以及固定定位（fixed），每种定位方式都有其独特的特性和应用场景。 #### 静态定位（Static） - **定义**：静态定位...