1.静态定位

静态定位的标签默认的定位方式,当position属性的取值为ststic时,可以将标签定位于静态位置。任何标签在默认的状态下都会以静态定位来确定自己的位置,所有当没有定义position属性时,并不是说明该标签没有自己的位置,它会遵循默认值显示为静态位置。在静态定位状态下,我们无法通过边偏移属性(top、bottom、left、right)来改变标签的位置。

HTML5支持地理位置定位 html地址定位_文档流


HTML5支持地理位置定位 html地址定位_HTML5支持地理位置定位_02

2.相对定位

相对定位是将标签相对于它在标准文档流中的位置进行定位,当position属性的取值为relative是,可以将标签相对定位。我们可以通过边偏移属性改变标签的位置,但是它在文档流中的位置仍然保留。

HTML5支持地理位置定位 html地址定位_HTML5支持地理位置定位_03


HTML5支持地理位置定位 html地址定位_文档流_04

3.绝对定位

绝对定位是将标签依据最近的已经定位的父标签进行定位,若所有父标签都没有定位,设置绝对定位的标签会依据body根标签进行定位。当position属性的取值为absolute是,可以将标签的定位模式设置为绝对定位。

HTML5支持地理位置定位 html地址定位_HTML5支持地理位置定位_05


HTML5支持地理位置定位 html地址定位_绝对定位_06

4.固定定位

固定定位是绝对定位的一种特殊形式,它以浏览器窗口作为参照物来定义网页标签。当position属性的取值为fixed时,即可将标签的定位模式设置为固定定位。当对标签设置固定定位后,该标签将脱离文档流的控制,始终依据浏览器窗口来定位最近的显示位置。不管浏览器滚动条如何滚动,也不管浏览器窗口大小如何变化,该标签都会始终显示在浏览器窗口的固定位置。

HTML5支持地理位置定位 html地址定位_HTML5支持地理位置定位_07


HTML5支持地理位置定位 html地址定位_HTML5支持地理位置定位_08