最内层元素的高度定义为百分比形式，高度确是以最外层元素决定

Question

    <style>
        .base {
            margin: 30px 0 0;
            min-height: 500px;
            position: relative;
            border: 1px solid black;
        }
        .outer {
            padding: 15px 0;
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #00bb54;
        }
        .parent {
            padding: 0 2%;
            height: 47px;
            display: block;
            border: 1px solid #f75959;
        }
        .parent a {
            display: inline-block;
            position: absolute;
            right: 2%;
            height: 50%;
            border: 1px solid darkblue;
        }
    </style>

<div class="base">
    <div class="outer">
        <div class="parent">
            <a href="#">这里是内容</a>
        </div>
    </div>
</div>

代码如上所示，出现如下结果：

Answer 1

出现这样的效果是因为最里层的元素被设置成了绝对定位，绝对定位会按照跟他最接近的设置了相对或绝对定位属性的祖先元素做参照，所以这里会以base做参照取它高度的50%来设置a元素的高度