现在有些同学可能已经有疑问了，你看这几种定位啊，都是让元素到了别的元素的前面。但是要是我们用这种方式把多个元素定义到了相同的位置，究竟谁在前面谁在后面？
这时候就涉及到了网页的坐标系，这是一个三维的坐标系，然而并不复杂在三维层面。真正让人头疼的是二维上的各种变化。让我们从最简单地聊起。
最简单的，网页的的左上角为坐标系的原点，向右为 X 轴的正方向，向下为 Y 轴的正的方向。那么向着屏幕外则是 Z 轴的正方向。
X、Y 轴我们用诸如像素之类的单位进行测量，而 Z 轴则只有顺序值，没有单位，它对应一个单独的属性值 z-index 来表示元素在这个方向上的顺序，这有就是我们前边问题的答案。（这个下一章进行演示）
如果只是这样我们当然很容易理解和掌握，但是很多时候事情没这么简单。元素的位置并不是固定的，所以有些东西就很难用默认的原点进行计算了。比如前边学习的背景位置（background-position），我们不能说元素背景在上边这个默认坐标系中位置，那样计算很麻烦，而且我们以后如果需要给元素移动位置，还要再次计算这个坐标值，显然很烦恼的。所以我们就用了相对坐标系。以元素的左上角为原点，去计算背景图片的偏移量（坐标）。那么其实这个背景定位的值也就是背景图的左上角相对于原点（元素的左上角）的坐标值。
你看我说了这么多左上角，因为在网页中左上角是一个很常用的定位基准，为什么选他？因为你的元素宽高的变化并不会影响左上角的位置（大部分情况下）。这样比较便于计算，这也是希望让事情变得简单。其实元素的宽高也可以看作是元素右下角点相对于左上角点（原点）的坐标。
然后再说前边用到的 left、right、top、bottom 这几个属性。他们涉及到的坐标系其实只有一个轴，比如 left 它涉及到的方向就是左右而已，或者说只是 X 轴的正负方向而已，这时候我们再去强调是哪个轴就已经是画蛇添足了。然后如果我们还按照基本的坐标系去判断正负方向依旧是徒增烦恼的做法，所以干脆根据我们的第一直觉，向着元素内的方向即为正方向，这样好记好判断。
同理的，padding 的四个方向也因为相同的原因而视为向内的是正方向。
margin 是和 padding 相对的，他们补的方向相反，所以 margin 以向元素外的方向为正方向。
这一章文字不多，但是很重要，因为这些问题几乎遍布了元素定位的每一个方面，希望仔细想想，努力去理解他们。
暂无评论内容