css定位流布局 可做轮播图 电梯导航等效果

定位流解决什么问题?

盒子压盒子
盒子盖盒子的效果

定位流可实现的效果案例

顶部搜索

京东顶部搜索

京东电梯导航

购物车计数器

轮播图按钮与小点

京东子级分类盒子

定位的模式

名称	关键词	是否脱离文档流	偏移参考	改变display
默认	static	否	无	不改变
相对定位	relative	否	定位前的自己	不改变
绝对定位	absolute	是	定位了的父级元素	inline-block
固定定位	fixed	是	浏览器窗口	inline-block

使用示例

            position: relative;
            left: 30px;
            top: 60px;

定位层次 z-index

定位了的元素可以通过z-index设置级别高低

使用示例

z-index: 5;

三种流模式的关系

理解三者的关系

标准流是地上的内容
浮动流是空间的内容
定位流是天界的内容
天界内容也分三六九等,用z-index进行评级

示意图

作业

购物车计数器