The World of TomasRan

坐标系变换-CSS中的绝对定位方式

CSS中的经纬度

学过数学的孩子都应该知道,对待很多坐标系下的几何数学问题,如果执拗于题设给出的坐标系可真就太傻了,坐标系只是解决问题的辅助方法,只是某个惯性系下的相对位置(论物理对码农的重要性!),如果你不喜欢,完全可以建立确立新的坐标原点,建立新的坐标系。

灵活的坐标系变换才是王道

CSS中的绝对定位方式允许我们变换定位坐标系的原点,这提供了怎样的便利性呢?

举个例子,我们想在地球表面建立两座高塔,要求这两座塔的连线要和东西方向平行,并且间隔一个特定距离,这两座高塔的经纬度已知。好,开工了,呆萌呆萌的总工程师需要确定它们的具体位置,于是经过一系列灰常复杂的计算得出这两个塔相对于地球坐标系零点(格林尼兹经线和赤道线)的所有信息,然后就开始施工了。这个过程以地球的零点为参考,分别定位两座塔。如果有足够的精度保证,也似乎没有什么问题,然而,却意想不到的出现了下面的状况:

灵活的坐标系变换:CSS的position定位方式

由于计算过程中存在的一点点误差,造成了实际定位中的一些偏移。两座塔不在东西方向上排列或者两座塔的水平间距超过了预期!很抱歉,不满足客户需求,除非你拥有一个出色的PM成功游说客户忍受了这貌似理所当然的缺陷。万一客户恰好是处女座的黄金圣斗士,那么推倒它重新建一座吧。

呆萌呆萌的总工程师想要重新计算一遍,精度保留到小数点后面1024位。嗯,nothing is impossible。这时候,工地上一个搬砖的少年一板砖拍在总工程师的脑门上:你是不是傻!紧接着,低调地贡献出来第二套方案:

灵活的坐标系变换:CSS的position定位方式

精确定位A塔的位置后,B塔的位置就通过相对于A塔的距离来确定。减少了运算,避免了大基数下带来的不可忽视的误差,更加准确更加棒。高手出自民间。

不错,这是一个搬砖工逆袭的故事。摆在眼前的,你是否看出来变换坐标系原点带来的诸多便利呢?答案如果是否定的,来,不妨在下面留下你的联系方式,我们可以一起探讨探讨美妙的数学。

CSS中position定位方式的坐标系变换

position 可供选择的属性值有哪些呢?我们还是去看看W3C标准提供了那些吧,其实也有很多浏览器产商自己开发了适应于自身的一些position属性,暂且不考虑这些未例入标准的,我们依然是去看看W3C的定义。Go to here

W3C关于 position 属性值的介绍简洁易懂。因此我在这里也就不长篇大论。我们需要理解的就是它的每一种属性值对应哪一个坐标系,坐标原点在哪里。

需要注意的地方

“position:absolute”的情况

在使用 position:absolute 绝对定位的时候,有一个地方需要留点神,即是绝对定位元素是相对于父元素的内容区域吗?还是包含边框和内边距?或者说,真正的坐标原点是内容区域的左上角,还是整个框的左上角等等,弄清楚这个问题,只需要看看下面这个例子:

.parent {
position: relative;
background: red;
width: 150px;
height: 150px;
border: 10px solid #333;
}

.child-one, .child-two {
position: absolute;
background: blue;
width: 75px;
height: 75px;
top: 0;
padding: 10px;
}

.child-one {
left: 0;
}

.child-two {
left: 100%;
}

<div class='parent'>
<div class='child-one'></div>
<div class='child-two'></div>
</div>

以上代码的呈现效果是这样的:

这一显示结果可以得出:在position: absolute 的定位方式中,top、left的设置并不是相对于父元素的边框,而是相对于父元素除边框之外的左上角。牢记这一点,不要让它破坏了你的格局。

另一方面,被定位的目标元素的边框对定位会有影响吗?它的计算方式是边框还是边框以内区域呢?我们给上面个两个元素添加边框

.child-one,.child-two {border: 10px solid orange;}

灵活的坐标系变换:CSS的position定位方式

结论显而易见,被定位的目标元素的边框是被计算在内的。

如果想实现是目标元素关于祖先元素的边框定位呢?可以使用一些hack的方法,例如设置margin-top,margin-left为负值,或者并不设置元素边框,通过其它标签来模拟出边框的效果(因地制宜)等等。

“position:relative”的情况

position设置为relative的定位方式,left如果设置为百分比计算的数值是:父级元素内容区域的宽度 百分比,top值则是:父级元素内容区域的高度 百分比。那么这个left是相对于自身的除边框之外的最左边,还是相对于自身左边框的最左边的距离呢?

看看下面的例子:

.parent {
width: 150px;
height: 150px;
background: red;
}
.child {
width: 75px;
height: 75px;
position: relative;
left: 75px;
border: 10px solid orange;
}
<div class='parent'>
<div class='child'></div>
</div>

灵活的坐标系变换:CSS的position定位方式

上图的虚线框部分是目标元素正常的位置。可见,relative定位的元素left值是左边框相对于正常位置左边框的距离。

小结

掌握了CSS中 position 的各种定位方式,则掌握了CSS定位机制的半壁江山,可以在指哪放哪的道路上越走越自信,不必担忧它是否在不同设备上拥有一致的表现。所谓懂得,便能宽心。