黑松山资源网

HTML的relative与absolute使用及区别详解
站长资源 2024/11/15 佚名
2 0
黑松山资源网 Design By www.paidiu.com

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>是兄弟关系

HTML的relative与absolute使用及区别详解

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

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

效果如下：

HTML的relative与absolute使用及区别详解

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

扩展：

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

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

HTML的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的relative与absolute使用及区别详解

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

黑松山资源网 Design By www.paidiu.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
黑松山资源网 Design By www.paidiu.com
www.paidiu.com 黑松山资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
黑松山资源网 Design By www.paidiu.com