1.层定位概述:

前端学习笔记--CSS布局--层定位-LMLPHP

z-index:前后叠加顺序

前端学习笔记--CSS布局--层定位-LMLPHP

前端学习笔记--CSS布局--层定位-LMLPHP

2.position属性:

前端学习笔记--CSS布局--层定位-LMLPHP

3.fixed:

前端学习笔记--CSS布局--层定位-LMLPHP

前端学习笔记--CSS布局--层定位-LMLPHP

前端学习笔记--CSS布局--层定位-LMLPHP

2.relative:

前端学习笔记--CSS布局--层定位-LMLPHP

移动后:

前端学习笔记--CSS布局--层定位-LMLPHP

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

3.absolute:

前端学习笔记--CSS布局--层定位-LMLPHP

移动后:

前端学习笔记--CSS布局--层定位-LMLPHP

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

4.relative:

前端学习笔记--CSS布局--层定位-LMLPHP

box1相对于static 定位。

5.absolute:

初始位置:

前端学习笔记--CSS布局--层定位-LMLPHP

absolute相对于absolute移动后:

前端学习笔记--CSS布局--层定位-LMLPHP

前端学习笔记--CSS布局--层定位-LMLPHP

移动后:

前端学习笔记--CSS布局--层定位-LMLPHP

6.一般设计方式:

前端学习笔记--CSS布局--层定位-LMLPHP

案例:

前端学习笔记--CSS布局--层定位-LMLPHP

区别:

前端学习笔记--CSS布局--层定位-LMLPHP

05-11 20:47