在此之前,我们学习了浮动布局。浮动布局比较灵活,但是不容易控制。而定位布局的出现,使得用户精准定位页面中的任意元素成为可能,此时页面布局操作也变得更加随心所欲。当然了,由于定位布局缺乏灵活性,也给空间大小和位置不确定的版面布局带来困惑。因此在实际开发中,大家应该灵活使用这两种布局方式,这样才可以更好地满足开发需求。

CSS定位使你可以将一个元素精确地放在页面上你指定的地方。联合使用定位和浮动,能够创建多种高级而精确地布局。其中,定位布局共有4种方式。

    这4种方式都是通过position属性来实现的,其中position属性取值如下表所示。

    表1 position属性取值
    属性值 说明
    fixed 固定定位
    relative 相对定位
    absolute 绝对定位
    static 静态定位(默认值)