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

1.层定位概述:

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

z-index:前后叠加顺序

 

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

 

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

2.position属性:

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

 

 3.fixed:

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

 

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

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

 

 2.relative:

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

移动后:

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

 

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

3.absolute:

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

移动后:

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

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

 

4.relative:

 

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

box1相对于static 定位。

 

5.absolute:

初始位置:

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

absolute相对于absolute移动后:

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

 

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

 

 移动后:

 

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

 6.一般设计方式:

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

案例:

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

 区别:

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

 

上一篇:CSS布局--垂直水平居中


下一篇:父子元素都有定位属性子元素的width的效果