前面我在解读CSS中也说过了关于相对定位和绝对定位的问题。无奈还是有些童鞋表示迷茫，于是另开一篇博客，来具体解读相对定位和绝对定位。希望可以以我的点点星光，让后来者少走弯路。

所谓相对定位，就是设置为相对定位的元素会偏移某个距离，元素仍然保持原来的样式，它会保留该HTML元素的空间，比方我们看例如以下代码：

.demo{

position: relative;

width:50px;

height: 50px;

left:50px;

}

它会出如今相对原来的地方向右50px的地方，而它原来所在的地方为空。

以下说一下绝对定位，所谓绝对定位。即不占用空间，假设原来这个地方有HTML元素，那么就会重叠，这里须要特别之处的，也是我发这篇博文的目的，就是想告诉大家，绝对定位假设被父元素包括，假设父元素没有定位属性，它会依据body进行定位，因此，假设它有父元素，必须在父元素中指定定位属性。例如以下代码：

<html>

<head>

	<title>辛星解读绝对定位和相对定位</title>

	<style type="text/css">

	.father{

		position: relative;

		width:300px;

		height: 300px;

		margin: 0 auto;

		border: 1px solid orange;

		}

	.sun{

		position:absolute;

		background:purple;

		width:50px;

		height: 50px;

		left: 50px;

		}

	</style>

</head>

<div class = "father">

	<div class = "sun"></div>

</div>

</html>

效果图：

可能有童鞋会问，假设我们不指定父元素的定位又会怎样呢？请看以下代码。我把css代码中的哪一行给凝视掉之后，源码例如以下：

<html>

<head>

	<title>辛星解读绝对定位和相对定位</title>

	<style type="text/css">

	.father{

		//position: relative;

		width:300px;

		height: 300px;

		margin: 0 auto;

		border: 1px solid orange;

		}

	.sun{

		position:absolute;

		background:purple;

		width:50px;

		height: 50px;

		left: 50px;

		}

	</style>

</head>

<div class = "father">

	<div class = "sun"></div>

</div>

</html>

然后是它的效果图：

以上就是我介绍的关于绝对定位和相对定位的问题，假设您有什么问题或者不解，能够在以下留言。谢谢。

辛星和你彻底搞清CSS中的相对定位和绝对定位的更多相关文章

  1. css中的相对定位与绝对定位

    之前说过了CSS有三种基本的布局机制:普通流.浮动和绝对定位.除非专门指定,否则所有的框都在普通流中定位.而普通流中元素框的位置由元素在HTML中的位置决定. 相对定位 相对定位实际上被看做普通流定位 ...

  2. CSS中的相对定位和绝对定位

    1.元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的, 使用相 ...

  3. css 中的相对定位和绝对定位

    1.默认不写position的话,值为static. 2.相对定位:相对于元素自己本身的位置偏移,虽然位置偏移,但元素本身占据的空间并不释放. 3.绝对定位:相对于离它最近的,position不为st ...

  4. 辛星彻底帮您解决CSS中的浮动问题

    浮动,是CSS布局中必须经过的一道坎,假设不熟悉浮动.那么CSS的布局就如同空中楼阁,而谈到浮动,很多其它的是和div相结合,div是一个块级元素.这个我前面的博文有介绍,假设大家喜欢我的风格,能够搜 ...

  5. css中的相对定位与绝对定位的区别

    1.绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对 ...

  6. 辛星跟您解析在CSS面包屑中三角形的定位问题

    刚才看到有位网友非常纳闷第二个棕色三角形是怎么定位的,我当感觉在以下说不清楚,就特别开了一片博客.来说清楚它.首先,前面的代码我们先抄下来,至于前面这部分代码是怎么来的,读我的用CSS制作面包屑导航的 ...

  7. 辛星和您一起解析PHP中的单例模式

    事实上单例模式还是用的挺多的,要说到最经典的样例.可能就是操纵数据库的类了,它假设是单例的话,能够避免大量的new操作消耗资源,而假设系统中须要一个类来管理全局的信息,则把它用成单例也是非常不错的.由 ...

  8. 辛星与您彻底解决CSS浮子（下一个）

    上述博客文章,我们解释如何使用CSS浮子,这是一个看我们如何解释清除CSS浮子.其实CSS浮动是很清楚easy,只需要使用clear它财产,至于如何利用好它.很多人可能会表决雾,我是个新手的时候还经常 ...

  9. css之position相对定位和绝对定位

    一.position的四个值:static.relative.absolute.fixed. 绝对定位:absolute和fixed统称为绝对定位 相对定位:relative 默认值:static 二 ...

随机推荐

  1. xss bypass

    重要的4个规则: 1 &符号不应该出现在HTML的大部分节点中. 2 尖括号<>是不应该出现在标签内的,除非为引号引用. 3 在text节点里面,<左尖括号有很大的危害. 4 ...

  2. spring的条件装配bean

    1 应用程序环境的迁移 问题: 开发软件时,有一个很大的挑战,就是将应用程序从一个环境迁移到另一个环境. 例如,开发环境中很多方式的处理并不适合生产环境,迁移后需要修改,这个过程可能会莫名的出现很多b ...

  3. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何在程序中添加注释

    在TwinCAT2中,(*中间输入注释*),也可以用这种方法批量注释,在TwinCAT3中,使用//即可     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youk ...

  4. mongodb安装的两条命令

    1. 安装 下载并安装,注意安装方式为custom,路径自定义(d:\chengxu\mongodb),安装成功后在mongodb文件夹下新建data文件夹(内新建db文件夹)和logs文件夹(内新建 ...

  5. 阿里云web播放器

    原文地址:https://help.aliyun.com/document_detail/51991.html?spm=5176.doc61109.6.703.ZTCYoi 一.概念说明 1. pla ...

  6. C# 视频监控系列：学习地址汇总

    原文地址:http://www.cnblogs.com/over140/archive/2009/04/07/1429308.html 前言 对于视频监控系统大家应该是不陌生的,实施的路况信息.地铁. ...

  7. C# -- 使用递归列出文件夹目录及目录下的文件 神技do{}while(false)

    C# -- 使用递归列出文件夹目录及目录下的文件 使用递归列出文件夹目录及目录的下文件 1.使用递归列出文件夹目录及目录下文件,并将文件目录结构在TreeView控件中显示出来. 新建一个WinFor ...

  8. c#封装DBHelper类 c# 图片加水印 (摘)C#生成随机数的三种方法 使用LINQ、Lambda 表达式 、委托快速比较两个集合，找出需要新增、修改、删除的对象 c# 制作正方形图片 JavaScript 事件循环及异步原理（完全指北）

    c#封装DBHelper类   public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> ...

  9. 机器学习之数据预处理，Pandas读取excel数据

    Python读写excel的工具库很多,比如最耳熟能详的xlrd.xlwt,xlutils,openpyxl等.其中xlrd和xlwt库通常配合使用,一个用于读,一个用于写excel.xlutils结 ...

  10. python-嵌套循环（Nested loop）-久久乘法表

    嵌套-久久乘法 for i in range(1,10): for j in range(1,10): print('{} × {} = {}'.format(i,j,i*j))最外层的循环依次将数值 ...