谈一谈我所遇到的定位属性

最新推荐文章于 2023-10-18 15:15:00 发布

weixin_33851429

最新推荐文章于 2023-10-18 15:15:00 发布

阅读量97

点赞数

原文链接：https://juejin.im/post/5cdd48d6518825609615fa4d

版权

世界杯是一个很神奇的运动，让我欲罢不能的想参与其中。于是我买德国赢--德国输了，巴西赢--巴西平了，哥伦比亚赢...。最近真的有点屋漏偏逢连夜雨不仅世界杯屡屡爆冷门，买的几只基金也像过山车一样，刹不住车顺流而下。好了，开始说一下我今天要写的定位属性--position。其实我最近一直在想一个问题，如果用大家都能懂得思维解释一个问题，希望能给读者营造一个轻松的环境，又能让读者学到知识。

一、介绍定位这一家子

首先我们谈一谈positon，他是规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。而在position中生活着四个孩子：

相对定位（大娃）relative：不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
绝对定位（二娃）absolute：**脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。
固定定位（三娃）fixed ：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。
默认定位（四娃）static：默认值；默认布局。 ##二、技能介绍上面大概也介绍了几口子的一些基本属性，但就算他脱离了基本的文档流，但是没有一个基本的技能还是无法来一场说走就走的旅游。于是我们在下面介绍一下他的几个技能。（注意四娃比较懒惰，并没有学习这几项技能）

①left ：表示向元素的左边插入多少像素，使元素向右移动多少像素(负数向左)。 ②right ：表示向元素的右边插入多少像素，使元素向左移动多少像素(负数向右)。 ③top ：表示向元素的上方插入多少像素，使元素向下移动多少像素(负数向下)。 ④bottom ：表示向元素的下方插入多少像素，使元素向上移动多少像素(负数向上)。

##二、有底线的大娃--相对定位首先我们先结合一下代码看一下大娃的定义：

<!DOCTYPE html>
<html>
<head>
	<title>position测试</title>
	<style type="text/css">
		.main{
			width: 600px;
			height: 600px;
			margin-left: 200px;
			margin-top: 200px;
			background: red;
		}
		.dawa {
			position: relative;
			width: 100px;
			height: 100px;
			background: blue;
			left:600px;
			top: 200px;
		}
		.erwa {
			width:100px;
			height: 100px;
			background: yellow;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="dawa"></div>
		<div class="erwa"></div>
		
	</div>

</body>
</html>
复制代码

效果如下：

某一天，大娃告诉未觉醒的二娃说，我想出去玩玩。然后二娃心想：大娃的房间比较舒服，于是就想着大娃出去之后，来一波鸠占鹊巢。但是却发现大娃虽然走了，但是大娃却把房间的门给锁上了。并且从上面的图示我们可以发现大娃是一个非常守规矩的小伙子，他只会相对于自己的位置进行移动。 ##三、守规矩的二娃--绝对定位二娃觉得大娃这个人心机很深，为什么你都出们了还把房门关上。于是在悲愤之下，二娃觉醒了，想顺着大娃的轨迹去找大娃理论

<!DOCTYPE html>
<html>
<head>
	<title>position测试</title>
	<style type="text/css">
		.main{
			width: 600px;
			height: 600px;
			margin-left: 200px;
			margin-top: 200px;
			border: 1px solid black;
		}
		.dawa {
			position: relative;
			width: 100px;
			height: 100px;
			background: blue;
			left:600px;
			top: 50px;
		}
		.erwa {
			width:100px;
			height: 100px;
			background: yellow;
			position: absolute;
			left:600px;
			top: 50px;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="dawa"></div>
		<div class="erwa"></div>
	</div>
</body>
</html>
复制代码

效果图如下：

等到二娃触发技能的时候，按照大娃的轨迹旅行完了之后却发现自己迷路了。等到大娃回来的时候，也发现二弟不见了。

这里可以发现 二娃（absolute）是根据浏览器来进行偏移的，所以和大娃（relative）相对于本身偏移的路径不同。

于是生气的大娃决定用自己的黑魔法将整个房间给圈起来。

<!DOCTYPE html>
<html>
<head>
	<title>position测试</title>
	<style type="text/css">
		.main{
			width: 600px;
			height: 600px;
			margin-left: 200px;
			margin-top: 200px;
			border: 1px solid black;
			position: relative; //  黑魔法
			overflow: scroll;
		}
		.dawa {
			width:100px;
			height: 100px;
			background: blue;
			position: absolute;
			left:600px;
			top: 50px;
		}
		.erwa {
			width:100px;
			height: 100px;
			background: yellow;
			position: absolute;
			left:600px;
			top: 50px;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="dawa"></div>
		<div class="erwa"></div>
	</div>
</body>
</html>
复制代码

使用完黑魔法的大娃回到旅游的去处了，继续玩耍。在大娃的敦敦教导之后，二娃便重新开始释放技能。效果图如下：

很多看官就会说了，命名没有看见大娃的身影，ok，那我们让大娃站在摄像机的前面。在大娃的css属性中添加一行 z-index: 100;，效果图如下：

##四、肆意妄为的三娃--固定定位看到二娃和大娃在旅游那里玩的嗨的不行，三娃一想我也有技能于是便发功顺着大娃和二娃的足迹去追寻。

<!DOCTYPE html>
<html>
<head>
	<title>position测试</title>
	<style type="text/css">
		.main{
			width: 600px;
			height: 600px;
			margin-left: 200px;
			margin-top: 200px;
			border: 1px solid black;
			position: relative; //  黑魔法
			overflow: scroll;
		}
		.dawa {
			width:100px;
			height: 100px;
			background: blue;
			position: absolute;
			left:600px;
			top: 50px;
			z-index: 100;
		}
		.erwa {
			width:100px;
			height: 100px;
			background: yellow;
			position: absolute;
			left:600px;
			top: 50px;
		}
		.sanwa {
			width:100px;
			height: 100px;
			background: black;
			position: fixed;
			left: 600px;
			top: 50px;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="dawa"></div>
		<div class="erwa"></div>
		<div class="sanwa"></div>
	</div>
</body>
</html>
复制代码

效果图：

但是当四娃的技能用完却发现自己和二娃一样也是迷路了，并且大娃的黑魔法也没有了什么作用。 ##五、总结相信有前面的一些小例子，大家也差不多都明白了position的含义： 1、 relative定位会相对于自身进行偏移，并且并在文档流中留下空白区域。 2、 absolute定位如果在没加限制的情况下会以浏览器的四个角进行偏移。 3、如果父容器的定位属性是relative，则absolute会以父容器的四周为起始点进行偏移。 4、 fixed定位不受到任何的拘束，始终会以浏览器四个角进行偏移

##说在最后这篇是我想了很久才正式写下来的文章，我主要重新读了之前的文章发现以前写的文章比较的无趣，让人看了之后有种想睡觉的欲望，我可不想这样。所谓之学习就应该是快乐的，我希望能用这种方式感染、帮忙到每一个人。好了，睡午觉去了...

转载于:https://juejin.im/post/5cdd48d6518825609615fa4d

weixin_33851429

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
谈一谈我所遇到的定位属性

世界杯是一个很神奇的运动，让我欲罢不能的想参与其中。于是我买德国赢--德国输了，巴西赢--巴西平了，哥伦比亚赢...。最近真的有点屋漏偏逢连夜雨不仅世界杯屡屡爆冷门，买的几只基金也像过山车一样，刹不住车顺流而下。好了，开始说一下我今天要写的定位属性--position。其实我最近一直在想一个问题，如果用大家都能懂得思维解释一个问题，希望能给读者营造一个轻松的环境，又能让读者学到知识。一、...
复制链接

扫一扫