position定位

知识点position: absolute;
一开始的惯性思维是子元素使用了absolute属性那么父元素就得是relative，这样子元素就相对于父元素定位了。
仔细看了看w3school文档对position:absolute的定义：生成绝对定位的元素，相对于非static定位的第一个父元素进行定位。
原来不仅仅是相对relative元素进行定位的哦；在demo中的span.text层相对于span.description定义的absolute进行绝对定位，保持在最上显示。
position:fixed;  生成绝对定位的元素，相对于浏览器窗口进行定位。
position:relative;  生成相对定位的元素，相对于其正常位置进行定位。
position: static;  默认值，没有定位。 在js控制position状态值切换的时候会用到。

<style>
    *{margin:0; padding: 0;}
    img{max-width: 100%; height: auto;}
    .clearfix:after{content:''; clear:both; display: table;}
    .clearfix{zoom:1;}
    .left{float:left;}
    .right{float: right;}
    .product{display: block; position: relative; width: 280px; margin:0 auto; border: 1px solid #e6e6e6; color: #444; font-size: 14px; box-shadow: 0 0 3px rgba(0, 0, 0, .3); text-decoration: none;}
    .product img{display:block;}
    .wrap{position: relative; display: block; width: 100%; padding-bottom: 30px;}
    .description{position: absolute; bottom:0; left:0; display:block; width: 100%;}
    .description .city{position: absolute; top:-24px; left:0; display: inline-block; padding: 0 5px; height: 24px; line-height: 24px; background: rgba(0, 0, 0, .2); color: #fff;}
    .description .title{display:block; height: 30px; line-height: 30px; color: #008451; background: #fff;}
    .description .text{display:block; max-height: 0; overflow: hidden; line-height: 1.5; background: #fff; transition: max-height 0.5s ease;}
    .product:hover .description .text{max-height: 85px;}
    .price-info{display:block; height: 30px; line-height: 30px; overflow:hidden;}
</style>
<a href="#" class="product">
    <span class="wrap">
        <img src="http://i.i-lewan.com/products_new/300x225/c9/featherdale-wildlife-park-542620.jpg" alt="" />
        <span class="description">
            <span class="city">悉尼</span>
            <span class="title">悉尼-费舍代尔(Featherdale)野生动物园</span>
            <span class="text">
                费舍代尔野生动物园是悉尼最棒的互动式野生动物接触体验场所，游客们可以亲近 300 多个种类的 2200 只动物，如您可以拥抱考拉、同考拉合影相、跟袋鼠握手等。
            </span>
        </span>
    </span>
    <span class="price-info clearfix">
        <span class="num left">已有100人购买</span>
        <span class="price right">￥200</span>
    </span>
</a>

通过改变max-height改变高度，然后使用过渡效果transition让高度改变的过程保持一定动画效果。