-
相对定位
相对定位是按照元素自身所在的位置,使用边偏移属性重新定义元素的显示位置,使用相对定位的元素依然是文档中的元素,元素的显示位置和元素所在文档中其他元素相互关联。
在确定相对定位元素位置的时候,首先要确定元素的原始位置,即元素在文档中的位置,然后根据偏移属性中定义的偏移值,确定元素的最终位置。
<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) - **定义**:静态定位...