先上代码好演示：

HTML:

    <div class="box">
        <img src="logo.png" />
    </div>

CSS:

    .box{}
    .box img {
        width: 100px;
        height: 100px;
        position: relative;
        left: 20%;
        top:20%;
    }

根据表象提的问题：相对定位后top百分比无效？

再将css中position:relative;改成position:absolute;有效果了

再次根据表象效果提问：相对定位top百分比无效，而绝对定位top百分比有效，这是为什么呢？

==根据表象，探讨事物本质原理，那就应该从物体本质属性出发==

分三点来探讨这个问题：

（1）、百分比

       
我们知道，一般情况，设置的百分比最后计算都是相对于父元素，而且是父元素的width，比如说：

margin: 50%;

       
但是，也有另外，上代码

HTML
    <div class="box">
        <img src="logo.png" />
    </div>

CSS:

    .box{
        width: 400px;
        height: 800px;
    }
    .box img {
        width: 100px;
        height: 100px;
        position: relative;
        left: 20%;
        top:20%;
    }

       
最后我们会发现，相对定位的top:20%;相对的是父框的height

==所以，定位后的定位值：left(right)、top(bottom)分别相对父框的width和height==

（2）、块级元素的高度

       
我们又知道，块级元素的宽度默认是父级元素的100%;而高度由元素内容撑开。

       
又回到上面的问题，如果将代码改成这样，top:20%会无效

HTML
    <div class="box">
        <img src="logo.png" />
    </div>

CSS:

    .box{
    }
    .box img {
        //图片默认尺寸：300*400
        position: relative;
        left: 20%;
        top:20%;
    }

       
虽然，box有高度，子元素的400px，但百分比依然无效，必须手动设置 height: 400px;才会有效果。

       
理解：虽然有高度，但不设置，相当于百分比相对于自身而言的，但其实也是相对于父元素而言，其实这样更好理解，但别人那样设置可能有它的苦衷吧！！！

（3）、定位特性的再次理解：

       
相对定位：相对于元素在文档流中的位置而定位，如果定位数值为百分比，则相对于父元素，上面已经阐述。

       
绝对定位：相对于已定位的父辈元素，可以是父亲，也可以是祖父、祖祖父、、、，或者直到==包含框==，这个包含框就是==窗口==

       
又回到最初的起点，记忆中你提出的问题、、、

       
relative的top百分比无效，absolute的top百分比有效？

有了上面提到的两个特性，一切都好解释：

relative的top百分比相对父元素，但是父元素没设置高度，所以无效；

absolute的top百分比有效，绝对定位相对于父辈元素直至包含框，我们这里就是包含框（窗口），所以有效