html - css 为什么改了改 postion 出现这个结果?

问题描述

.boxSon{ position:absolute; top:50%; left:50%; border:black solid 1px; transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-20%,-50%);}这是字的代码:

把 position:absolute; 改成 position:relative 后效果成了下面这样:.boxSon{ position:relative; top:50%; left:50%; border:black solid 1px; transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-20%,-50%);}

我一直以为 position:relative; 就是改下坐标系,偏移点,但是这里居然这么大不一样.谁能简单给我讲讲为什么????

问题解答

隐式类型转换，absolute的时候p为inline-block,relative的时候为block