HTML的relative与absolute区别

HTML的relative与absolute区别：说实话html这门语言算的上是这个世界上最简单的一门语言了，标签语言嘛，就是标签多了点英文单词超多，不过都是有规律的比如文本类居中text-align:center;加粗text-weight:bold;.但是还是有一些比较难理解掌握标签和属性，就比如属性position,它是定位的一种方式代码如下：

#div1{position: relative;width: 200px;height: 200px;background-color: blueviolet;margin-left: 100px;}

先来说一下postion常用的5大属性值：

--sticky：基于用户的滚动位置来定位。也就是以sticky标签定义的标签会随着页面上下移动，但是其内容却不会超过屏幕比如在网站侧边那些移动导航栏。

--static：HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到 top, bottom, left, right影响。也就是和没写position一样的效果。

--fixed：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动，相当一个壁纸标签一样一动不动像镶嵌在屏幕里一样，在很多网站尤其是购物网站里面经常能看到，你看到页面侧边那静静躺在那的导航栏就是用fixed实现的

--relative与absolute：相对定位元素的定位是相对其正常位置。每个标签的样式设置从来都是针对自己的，但是会对其余标签产生相对影响，html很重要的一点就是嵌套关系即标签里有标签，首先在平级我们看下效果两个<div>是兄弟关系

以上这种情况将div1的position设置为relative相对位置，可以看出小方块会紧接着大方块也就是小方块是相对于大方块来的也就是relative：相对定位元素的定位不允许元素的重叠，俗话就是通过relative说这个位置我已经占了你只有站我下个位置了，当我们把大方块的改成绝对位置absolute

#div1{position: absolute;width: 200px;height: 200px;background-color: blueviolet;margin-left: 100px;
}

效果如下：

小方块会跳上去，也就是说这个位置两个div都能占，不是大方块独占的absolute定位是定位绝对的相对于父标签而言，本例的父标签就是<body></body>

扩展：

<div id="div1"><div id="div2"></div>
</div>

当小方块嵌套在大标签里面这时你的div1的position的relative与absolute效果一样没有改变之前的效果只体现在兄弟标签之间

这时候如果你再设置div2的样式margin-left就是相对于div2来说了，举个例子当你大方框距离左边100px当你小方框样式margin-left：100px;这时实际情况是小方框距离左边有200px

#div1{position: relative;width: 200px;height: 200px;background-color: blueviolet;margin-left: 100px;}#div2{margin-left: 100px;position: absolute;width: 50px;height: 50px;background-color: red;}

总结：相对定位元素经常被用来作为绝对定位元素的容器块，当标签有嵌套时，子标签的位置样式设置是相对于父标签的。宁外想要了解快标签就必须了解html的盒子模型，

HTML的relative与absolute区别相关推荐

relative和absolute的区别
这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层 ...
relative，absolute，fixed的区别及具体用法
内容来自阮一峰的博客http://www.ruanyifeng.com/blog/2019/11/css-position.html 觉得比较通俗易懂,所以就复制过来了. relative.absol ...
[css] position的relative和absolute定位原点是哪里？
[css] position的relative和absolute定位原点是哪里? absolute: 定位原点为第一个position不为static的父级元素的左上角. 可以基于该特性实现heigh ...
relative和absolute使用
relative和absolute使用开发工具与关键技术:DW 作者:黄金燕年级: 1805 撰写时间: 2019年2月16日 relative相对定位,absolute绝对定位某个元素,disp ...
CSSposition定位（relative、absolute、fixed、sticky）
这一周,我在逆战班学习了很多,具体介绍一下position相对定位和绝对定位,希望可以帮助到你. **position定位 ** position 的五个属性:static(默认).relative. ...
CSS中position的relative和absolute.
2021 first note CSS中position的relative和absolute. 之前接触过, 听老师讲的时候, 赶脚自己挺明白的, 后来就放下了, 最近又开始复习, 发现有些熟悉但更多 ...
relative和absolute的使用(详细+案例)
相对定位relative:相对于自己原先的位置而调整位置+会占用原先位置 eg: 原先位置(在没有加top,left,right,bottom调整位置) 根据原先位置加top而调整定位绝对定位abs ...
position的值， relative和absolute分别是相对于谁进行定位，你真的知道吗？
常见的position定位方式如下: static 默认值.元素出现在正常的普通流中 relative 生成相对定位的元素,相对于其在普通流中的位置进行偏移. fixed (老IE不支持)生成绝对定位 ...
relative、absolute定位居中以及小总结
relative.absolute 定位小总结: 一.relative 定位总结: 特点: 1.除了位置被left等四个属性影响,对元素没有任何影响(大小) 2.只设置position属性,元素没有任 ...
细谈position属性:static、fixed、relative与absolute
更新时间:2019-07-24 09:21:38 学习WEB有些时日了,对DOM中的定位概念有些模糊,特地花了一个下午的时间搜资料.整理写下这篇随笔. 首先,我们要清楚一个概念:文档流. 简单的讲,就 ...

HTML的relative与absolute区别

HTML的relative与absolute区别相关推荐

最新文章

热门文章