`
huohouha
  • 浏览: 4934 次
  • 性别: 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+Js定位与相对定位

    总的来说,CSS相对定位是网页布局的基础,而JavaScript则提供了动态定位和交互的能力。通过结合两者,开发者可以创建出更丰富、更具交互性的网页体验。在实际项目中,理解和运用这些定位技术是提升用户体验的关键。...

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

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

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

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

    css定位绝对相对定位

    ### CSS定位详解:绝对定位与相对定位 #### 相对定位(Relative Positioning) 相对定位是一种常见的CSS定位方式,它允许元素相对于其正常位置进行偏移。这种定位不会影响其他元素的位置。 - **定义**: 当元素...

    郜振宇php职业培训系列讲座010:详解css浮动、绝对与相对定位.rar

    浮动、绝对定位和相对定位是CSS中的关键概念,它们对于创建复杂的网页布局至关重要。本讲座将深入探讨这些概念,帮助您理解何时及如何有效地使用它们。 1. CSS 浮动(Float) 浮动最初是为了实现文本环绕图像而引入...

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

    本教程将深入探讨两种主要的定位方式:相对定位和绝对定位,这两种方法在DIV+CSS布局中尤其常用。 1. 相对定位(relative) 相对定位是CSS定位的基础,它保持元素在正常文档流中的位置,但允许通过`top`、`right`、...

    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

    本讲主要探讨的是CSS3中的相对定位(Relative Positioning)。 相对定位是CSS定位模式的一种,它允许我们将元素相对于其原始在文档流中的位置进行偏移。相对定位的特点在于,即使元素的位置发生了改变,但它仍然...

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

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

    css图片定位

    CSS提供了多种定位方式,包括静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)和粘性定位(sticky)。静态定位是元素的默认定位方式,不改变元素在文档流中的位置。相对定位则...

    CSS控制div在网页中的位置

    在探讨CSS控制div在网页中的位置这一主题时,我们聚焦于两种主要的定位技术:CSS绝对定位和CSS相对定位。这两种方法在网页设计中扮演着关键角色,尤其当设计师需要精确控制元素位置时。 ### CSS绝对定位(Absolute ...

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

    CSS中的定位机制包括静态定位、相对定位、绝对定位和固定定位。在这里,我们将主要探讨相对定位,它是初学者必须掌握的基础概念。 相对定位(Relative Positioning)是一种允许元素在原有位置基础上进行偏移的定位...

    前端css定位.pdf

    定位模式包括静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。边偏移属性则涉及top、bottom、left和right,用于控制元素在页面上具体位置的偏移量。 静态定位是默认的定位方式,元素...

    详解css定位与定位应用

    CSS提供了多种定位方式,包括静态定位(static)、相对定位(relative)、绝对定位(absolute)以及固定定位(fixed),每种定位方式都有其独特的特性和应用场景。 #### 静态定位(Static) - **定义**:静态定位...

Global site tag (gtag.js) - Google Analytics