HTML中怎样区别绝对定位和相对定位呢?

网页布局经常用到相对定位和绝对定位,但是有些小伙伴对于相对定位和绝对定位还不是很了解,今天小编我就来给大家深入分析分析。

操作方法

  • 01

    如图,书写两个div,一个div里面包含有另一个div,并且分别给它们添加一个类。

  • 02

    然后我们使用*来清除所有元素的margin和padding。

  • 03

    然后我们先来设置rone这个类,这里我就设置成红颜色,并且距离浏览器顶部200像素。

  • 04

    保存预览,可以看到,带有rone类的div变成了红颜色,并且它距离浏览器顶部有一定的距离哦。

  • 05

    接着设置rtwo类的属性,这里我就设置成蓝色,与红色区别开来。

  • 06

    如图,可以看到红颜色的div里面包含有蓝颜色的div,在没有特殊定位下,它们位置如图所示。

  • 07

    接着我们把rtwo的position属性设置为relative(相对定位),然后设置left和top的值,表示往右和往下偏移20px。

  • 08

    接着看看设置相对定位之后的位置变化,可以看到,蓝色的div偏移了,并且是相对它自己原来的位置。也就是说,相对定位是相对自己原来的位置来进行定位的。

  • 09

    接着我们再去修改rtwo的position,把它改为absolute,看看会发生什么状况。

  • 10

    如图,蓝色div设置绝对定位之后,会跑出红色div的范围,变成以网页的左上角为标准,进行定位,而不是以自己的位置为标准进行定位。

  • 11

    接着我们来设置rone的position属性为absolute或者relative,这里我就设置absolute了。

  • 12

    然后,再来看看定位效果,可以看到,蓝色div又跑回红色div里面了。 这里,我们先称红色div为父盒子,蓝色div为子盒子。 在两者都没有特殊定位下,父盒子包含子盒子。当子盒子相对定位,父盒子没有定位,则子盒子相对自己原来的位置偏移。当子盒子绝对定位,父盒子没有定位,则子盒子以网页左上角进行偏移。当子盒子相对定位,父盒子绝对定位/相对定位,则子盒子相对自己原来的位置进行定位。当子盒子绝对定位,父盒子绝对定位/相对定位,则子盒子基于父盒子左上角定位。

(0)

相关推荐

  • CSS设置DIV的定位绝对定位和相对定位

    设置DIV或者其他元素在浏览器中显示的位置是HTML布局中重要的一个内用,我们通过合理的布局使得我们的网站美观大方,这里我就来说说如何使用CSS来给div定位. 操作方法 01 首先我不给div定位来 ...

  • PS软件Photoshop中怎么区别图像大小和画布大小

    今天,小编给大家分享PS软件Photoshop中区别图像大小和画布大小的方法,希望对大家有所帮助.具体如下:1. 首先,请大家在自己的电脑中找到"PS"软件,点击进入主界面,然后把 ...

  • ie6 ie7 ie8 ie9和FireFox Chrome中css区别总结

    操作方法 01 1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 t ...

  • div中的相对定位与绝对定位

    操作方法 01 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设置垂直或水平位置,让这个元素"相对于"它的原始起点进行 ...

  • 如何区别微博中的视频与故事

    有的小伙伴在使用微博软件时,想要发布视频或者故事,但是却不知道视频和故事中的区别,因此小编就来为大家介绍一下它们之间的区别吧.具体如下:1.第一步,点击并打开微博软件.2. 第二步,来到微博主页面后, ...

  • VB6.0中回车符与换行符在文本框输出的区别

    在VB6.0输出结果时经常用的方法是Print方法进行屏幕输出,此方法常用于VB6.0的编程测试阶段.文本框常用于显示输出结果.在显示结果时经常会涉及到回车符与换行符的使用.接下来以实例说明回车符ch ...

  • VB中Static与Dim定义变量的区别

    Static定义的变量为静态变量,Dim定义的变量为自动变量.static定义一个变量,每一次引用这个变量的时候,该变量都会继续保留,好像叠加功能一样,而Dim则不会保留,每次引用变量,不会受到上次调 ...

  • ipad air和ipad mini2区别对比评测 哪个比较好?

    iPad Air和iPad Mini2都是苹果今年一同发布推出的新一代平板电脑,对于这两款已经都开售的苹果新一代平板电脑,很多网友都不知道该选择哪一款,网上最近有大量果粉用户在问iPad Air和iP ...

  • 《炉石传说》背景场景中隐藏的有趣的细节

    <炉石传说>作为一款现行的很火的网络卡牌游戏,不但制作精良,而且细节之处不得不赞,现在我就给大家扒一扒炉石中场景中的那些有趣的小细节吧 操作方法 01 大家要注意两张图中的区别,然后按照图 ...