定位，同浮动一样是前端开发人员进行css布局的另一神器。浮动布局比较灵活，但不容易控制，定位布局则相反，可以让用户精确地控制元素在页面中的位置“指哪打哪”，但缺乏浮动布局的灵活性。
在css中，定位布局共有四种方式：
（1）固定定位（fixed）；
（2）相对定位（relative）；
（3）绝对定位（absolute）；
（4）静态定位（static）。
1、固定定位
当元素的position属性设置为fixed时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置（在视野中），相对屏幕的可视区进行定位。示例，
固定定位，使用top、bottom、left和right这4个属性来设置元素相对浏览器窗口的位置，造成元素完全脱离文档流，改变元素类型，多用于“回顶部”特效和固定栏目的设置。
2、相对定位
当元素的position属性设置为relative时，此时元素便具有相对定位的特性。相对定位的元素，其位置是相对于它的原始位置计算而来的，同样具有top、bottom、left和right这4个属性。相对定位不使元素脱离文档流，不改变元素的本身类型。示例，
3、绝对定位
绝对定位absolute,是定位属性中出场频率最高的一个，一般配合relative使用，真正的实现了“指哪打哪”的效果。一个元素变成了绝对定位元素，这个元素就完全脱离正常文档流了，绝对定位元素的前面或者后面的元素会认为这个元素并不存在，即这个元素“浮”在其他元素上面。绝对定位会改变元素的本身类型（行内元素会变成块元素），其位置如果有定位父级相对于定位父级发生偏移，如果没有定位父级相对于整个文档发生偏移。
4、静态定位
如果没有指定元素的position属性值，元素也就是静态定位。static是position属性的默认值，它表示块保留在原本应该在的位置，不会重新定位。这个属性一般很少使用，不支持left、top等属性值，使用场景一般在清除其他定位属性上。
网友评论