change an elements relative position - zilongxuan001/LearnFreecode GitHub Wiki
CSS将每个HTML元素视为一个盒子，这就是通常说的CSS Box Model。
块水平的条目自动开始新的一行，想想标题，段落和组块。而行内条目（比如图片和span）包含着内容。
默认的元素布局是被称为文档自然流（normal flow），但是CSS提供了位置属性来覆盖它。
当元素的位置被设置为relative,它允许你详细指出CSS在页面的自然流中是如何相对它现在的位置移动它的。
它和CSS的偏移属性（left,right,top 和bottom）是成套使用的，后者是用来说明移动了多少px,百分比或者em。
下面举例说明移动段落偏离10px
p {
position: relative;
bottom: 10px;
}
改变元素的位置（position）为relative并不会把它从自然流中移除，其他围绕它周围的元素仍然表现为那个条目仍在默认的位置。
** 注意 ** 位置给了你很大的灵活性和方式来改变页面的视觉布局。记住无论元素的位置如何，当从上学到下阅读时，HTML标记会被组织和赋予意义。这也是视力有障碍的人如何阅读你的内容。
改变h2的position为relative,使用CSS偏移（offset）把它从顶部偏离15px。
注意不要影响h1和p元素的位置。
<style>
h2 {
position: relative;
top:15px;
}
</style>
<body>
<h1>On Being Well-Positioned</h1>
<h2>Move me!</h2>
<p>I still think the h2 is where it normally sits.</p>
</body>
Applied Visual Design: Change an Element's Relative Position | Learn freeCodeCamp
2018-10-23 16:16:16