css定位的简单运用

父容器使用相对定位position: relative

子容器使用绝对定位position: relative

这样就可以子容器相对父容器定位了，可以写一个自适应样式

例如：要实现一个很简单的列表展示

价格和购买是相对父容器底部10px，买够是自适应整个页面具体右边10px

<div style="position: relative">
    <div>
        <img src="img/b.png" style="max-width: 150px; float: left" />
    </div>
    <div style="height: 100px; float: left;">
        <div>
            <a href="#">苹果笔记本</a>
        </div>
        <div style="margin-top: 10px">
            很厉害笔记本 I5,16G,512SSD
        </div>
        <div style="position: absolute; bottom: 10px;">
            价格：<label style="color: red">$10000</label>
        </div>
        <div style="position: absolute; right: 10px; bottom: 10px">
            <a href="#">购买</a>
        </div>
    </div>

    <hr style="clear: both" />
</div>

这里思路就是最外层div使用相对定位，

里边有需要的就使用绝对定位就可以通过left,top,bottom,rigth等来自适应父容器的位置了