相信大家在初期写网页的时候,应该特别喜欢用定位。但是其他过多的使用会使布局混乱。恰当的使用定位,不但可以节省代码,还可以让布局更简便。
-
相对定位
占页面位置,以自身的位置为标准
通过left、top、bottom、right改变位置
z-index改变定位元素的层叠次序,没有单位,值越大越靠上
position:relative;
left:50px;
top:50px;
可以根据自己想要的位置调整。 -
绝对定位
脱离文档流(正常的文档顺序显示),不占页面位置以最近的定位的父元素为标准。若父元素没有定位则以body为标准
position:absolute;
left:50px;
top:50px;
可以是负值 -
固定定位
不占页面
以窗口为标准
position:fixed;
top:50px;
left:50px;
一般京东的侧边条可以使用,写出这种效果
最后,大家使用定位的技巧,“子相父绝”-------如果子元素使用定位,父元素没有定位,子元素会以整个浏览器为基准移动。如果子元素使用定位,父元素有定位(无论是绝对定位,还是相对定位)子元素都会以父元素为基准移动。最佳的使用方法:子元素使用绝对定位,父元素使用相对定位。