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

世界杯是一个很神奇的运动，让我欲罢不能的想参与其中。于是我买德国赢--德国输了，巴西赢--巴西平了，哥伦比亚赢...。最近真的有点屋漏偏逢连夜雨不仅世界杯屡屡爆冷门，买的几只基金也像过山车一样，刹不住车顺流而下。好了，开始说一下我今天要写的定位属性--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

谈一谈我所遇到的定位属性相关推荐

谈一谈浏览器解析CSS选择器的过程【前端每日一题-6】
谈一谈浏览器解析CSS选择器的过程? 这是一道发散题,可以根据自己的理解自行解答. 在开始前,我们必须了解一个真相:为什么排版引擎解析 CSS 选择器时一定要从右往左解析? 简单的来说:浏览器从右到左 ...
有一群200w年薪的朋友是什么感觉？谈一谈入学中国科学院大学的几点感受吧
我叫阿广,偶尔正经,偶尔逗比,97年生人,在求学期间当过鸡头鸡尾,当过凤尾没当过凤头.大家如果想深入了解我,可以查看本公众号的原创文章. 技术人光有技术走不长久,所以今天不更新技术文章了,也给大家谈一 ...
【建站系列教程】5、谈一谈网站的静态化
[建站系列教程]5.谈一谈网站的静态化[进阶] 动态页面?静态页面?伪静态页面? 三个页面有何优缺点? 为什么要让网页静态化如何网页伪静态化? 写在前面:大家好,我是热爱编程的小泽. [建站系列教程 ...
谈一谈周公所理解的面试
因为公司最近招聘的力度很大,所以最近公司的面试很多,加之很多同事项目紧,所以让我参加了一些技术面试.不论是作为面试官还是应聘者,参加工作以来我参与的面试的次数我自己也记不清了,所以在此想从面试官和应聘 ...
我从阿里面试回来，想和Java程序猿谈一谈
最近小编看了一篇关于面试的文章,题目是"我从阿里面试回来,想和Java程序员谈一谈",内容不是讲面试前刷题,而是更加聚焦在面试前如何准备,以及工作当中如何学习.感觉总结的很不错,今 ...
怎么学python-结合学习经历，谈一谈如何学习Python
结合自己的学习经历,谈一谈如何学习Python吧. 入门阶段 Python其实语言本身已经很接近自然语言了,所以入门其实并不麻烦.如果你是从未接触过编程的萌新,给你推荐一门Udacity CS101, ...
先查询再插入的存储过程怎么写_谈一谈 InnoDB(1) - 底层存储文件结构
看技术文章是不是很累呢, 这次来个轻松点的~来谈一谈MySQL最主流的数据库引擎 InnoDB 吧~ 序老王走进一号会议室, 随手打开了灯, 小张紧随其后 "王哥, 找我来干啥啊" ...
Java程序员谈一谈-----java程序员成长之路
转载:http://www.banzg.com/archives/679.html?ref=myread 阿里面试回来,想和Java程序员谈一谈引言其实本来真的没打算写这篇文章,主要是LZ得记忆力 ...
谈一谈并查集QAQ（上）
最近几日理了理学过的很多oi知识...发现不知不觉就有很多的知识忘记了... 在聊聊并查集的时候顺便当作巩固吧.... 什么是并查集呢? ( Union Find Set ) 是一种用于处理分离集合的 ...

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

一、介绍定位这一家子

谈一谈我所遇到的定位属性相关推荐

最新文章

热门文章