1.层定位概述:

前端学习笔记--CSS布局--层定位 随笔 第1张

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

z-index:前后叠加顺序

 

前端学习笔记--CSS布局--层定位 随笔 第2张

 

前端学习笔记--CSS布局--层定位 随笔 第3张

2.position属性:

前端学习笔记--CSS布局--层定位 随笔 第4张

 

 3.fixed:

前端学习笔记--CSS布局--层定位 随笔 第5张

 

前端学习笔记--CSS布局--层定位 随笔 第6张

前端学习笔记--CSS布局--层定位 随笔 第7张

 

 2.relative:

前端学习笔记--CSS布局--层定位 随笔 第8张

移动后:

前端学习笔记--CSS布局--层定位 随笔 第9张

 

static没有往上移动占据box1的位置。

3.absolute:

前端学习笔记--CSS布局--层定位 随笔 第10张

移动后:

前端学习笔记--CSS布局--层定位 随笔 第11张

static往上移,占据box1的位置。

 

4.relative:

 

前端学习笔记--CSS布局--层定位 随笔 第12张

box1相对于static 定位。

 

5.absolute:

初始位置:

前端学习笔记--CSS布局--层定位 随笔 第13张

absolute相对于absolute移动后:

前端学习笔记--CSS布局--层定位 随笔 第14张

 

前端学习笔记--CSS布局--层定位 随笔 第15张

 

 移动后:

 

前端学习笔记--CSS布局--层定位 随笔 第16张

 6.一般设计方式:

前端学习笔记--CSS布局--层定位 随笔 第17张

案例:

前端学习笔记--CSS布局--层定位 随笔 第18张

 区别:

 前端学习笔记--CSS布局--层定位 随笔 第19张

 

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄