CSS是前端工程师必备的技能之一,其定位属性在布局设计中扮演着重要的角色。通过定位属性,可以在网页布局中实现各种复杂的效果。
定位属性有如下几种: 1、static:默认值,元素在文档流中正常排列 2、relative:相对定位,元素相对于其原本的位置进行定位 3、absolute:绝对定位,元素相对于其内层第一个定位祖先进行定位 4、fixed:固定定位,元素相对于浏览器窗口进行定位
相对定位的用法如下:
.Box{ position: relative; left: 50px; top: 50px; }
上述代码将.Box元素相对于其原本的位置向右偏移50px,向下偏移50px。
绝对定位的用法如下:
.Box1{ position: relative; } .Box2{ position: absolute; left: 50px; top: 50px; }
上述代码将.Box2元素相对于.Box1进行定位,向右偏移50px,向下偏移50px。
固定定位的用法如下:
.Box{ position: fixed; right: 50px; bottom: 50px; }