`
huohouha
  • 浏览: 4679 次
  • 性别: Icon_minigender_2
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS相对定位

    博客分类:
  • css
 
阅读更多


  1.  

     相对定位

       相对定位是按照元素自身所在的位置,使用边偏移属性重新定义元素的显示位置,使用相对定位的元素依然是文档中的元素,元素的显示位置和元素所在文档中其他元素相互关联。

        在确定相对定位元素位置的时候,首先要确定元素的原始位置,即元素在文档中的位置,然后根据偏移属性中定义的偏移值,确定元素的最终位置。

<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 属性来控制这些框的堆放次序。

 

 

       

  • 大小: 10.3 KB
  • 大小: 8.8 KB
分享到:
评论

相关推荐

    20190801-css相对定位.txt

    css相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在她所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素"相对于"它的起点进行移动。 如果将top设置为20px,那么框...

    CSS相对定位和绝对定位

    CSS相对定位和绝对定位,让你轻松了解css的定位知识和相关的内容

    css相对定位使用示例

    主要介绍了css相对定位使用示例,需要的朋友可以参考下

    css 相对定位 绝对定位 浮动 分析

    CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 如果将 top 设置为 20px,...

    CSS+Js定位与相对定位

    CSS+Js定位与相对定位

    JS+CSS相对定位实现的下拉菜单

    本文实例讲述了JS+CSS相对定位实现的下拉菜单。分享给大家供大家参考。具体如下: 这里使用的是相对定位,不过效果还可以,用时候再修整一下,这个只是实现了大概功能,还有许多细节没有修饰。 运行效果截图如下: ...

    HTML+css基础入门学习教程之CSS 相对定位

    CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 如果将 top 设置为 20px,...

    css定位绝对相对定位

    css的绝对定位,相对定位,浮动的规则。等等等

    CSS实验室.rar

    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

    HTML5&CSS3网页制作:相对定位.pptx

    相对定位 相对定位 01 元素的定位 定位 属性 相对 定位 绝对 定位 固定 定位 静态 定位 描述 在CSS中,通过定位属性可以实现网页中元素的精确定位,元素的定位属性主要包括定位模式和边偏移两部分。 相对定位 描述 ...

    dreamweaver 【CSS样式规则对话框详解】& CSS定位详解之绝对定位和相对定位

    有了这个就可以搞定很多事情 在“CSS规则对话框”中,我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置,来美化我们的页面,当然啦,我们在定义某个...还有【CSS定位详解之绝对定位和相对定位】哦

    div+css相对定位和绝对定位用法实例详解

    在用DIV+CSS控制排版过程中,定位一直被人认为是一个难点,在没有深入理解清楚定位的原理时,排出来的杂乱网页常让他们不知所措,下面的教程能让你更深入地了解CSS定位属性

    css的定位属性.md

    介绍了css的定位属性,position的相对定位,绝对定位等,里面的内容并不是很全,希望可以给你提供一些帮助。

    CSS网页布局教程:绝对定位和相对定位

    通过本文你绝对能理解绝对定位和相对定位了,如果你看完本篇文章还不理解绝对定位和相对定位的话,我看你就别学CSS了!哈哈! 概要: 本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系...

    div+css详解定位与定位应用

    div+css详解定位与定位应用

    详解学习DIV+CSS之四-绝对定位和相对定位

    详解学习DIV+CSS之四-绝对定位和相对定位

Global site tag (gtag.js) - Google Analytics