-
相对定位
相对定位是按照元素自身所在的位置,使用边偏移属性重新定义元素的显示位置,使用相对定位的元素依然是文档中的元素,元素的显示位置和元素所在文档中其他元素相互关联。
在确定相对定位元素位置的时候,首先要确定元素的原始位置,即元素在文档中的位置,然后根据偏移属性中定义的偏移值,确定元素的最终位置。
<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 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 如果将 top 设置为 20px,...
CSS+Js定位与相对定位
本文实例讲述了JS+CSS相对定位实现的下拉菜单。分享给大家供大家参考。具体如下: 这里使用的是相对定位,不过效果还可以,用时候再修整一下,这个只是实现了大概功能,还有许多细节没有修饰。 运行效果截图如下: ...
CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 如果将 top 设置为 20px,...
css的绝对定位,相对定位,浮动的规则。等等等
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
相对定位 相对定位 01 元素的定位 定位 属性 相对 定位 绝对 定位 固定 定位 静态 定位 描述 在CSS中,通过定位属性可以实现网页中元素的精确定位,元素的定位属性主要包括定位模式和边偏移两部分。 相对定位 描述 ...
有了这个就可以搞定很多事情 在“CSS规则对话框”中,我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置,来美化我们的页面,当然啦,我们在定义某个...还有【CSS定位详解之绝对定位和相对定位】哦
在用DIV+CSS控制排版过程中,定位一直被人认为是一个难点,在没有深入理解清楚定位的原理时,排出来的杂乱网页常让他们不知所措,下面的教程能让你更深入地了解CSS定位属性
介绍了css的定位属性,position的相对定位,绝对定位等,里面的内容并不是很全,希望可以给你提供一些帮助。
通过本文你绝对能理解绝对定位和相对定位了,如果你看完本篇文章还不理解绝对定位和相对定位的话,我看你就别学CSS了!哈哈! 概要: 本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系...
div+css详解定位与定位应用
详解学习DIV+CSS之四-绝对定位和相对定位