position

2016-07-02  本文已影响0人  cooore

定位

·position-设置定位方式,定位的方式最重要的是设置参照物

·top,right,bottom,left,z-index - 设置位置

top/right/bottom/left 元素边缘距参照物边缘的距离


z-index 设置元素在Z轴上的排序

z-index 栈

position:static|relative|absolute|fixed

position:relative

·相对定位的元素仍在文档流中

·相对定位的元素参照物是元素本身

·改变了元素的层级

使用场景:绝对定位元素的参照物

position:absolute

·默认宽度为内容宽度

·脱离文档流

·参照物为第一个定位祖先/根元素

布局 - 轮播头图

position:fixed

·默认宽度为内容宽度

·脱离文档流

·参照物为视窗

position:fixed 在ie6及以下不支持

布局 - 固定顶栏

布局-遮罩

布局 - 三行自适应布局

上一篇下一篇

猜你喜欢

热点阅读