首页 > Web开发 > 详细

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

时间:2019-10-17 23:40:55      阅读:100      评论:0      收藏:0      [点我收藏+]

1.层定位概述:

技术分享图片

z-index:前后叠加顺序

 

技术分享图片

 

技术分享图片

2.position属性:

技术分享图片

 

 3.fixed:

技术分享图片

 

技术分享图片

技术分享图片

 

 2.relative:

技术分享图片

移动后:

技术分享图片

 

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

3.absolute:

技术分享图片

移动后:

技术分享图片

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

 

4.relative:

 

技术分享图片

box1相对于static 定位。

 

5.absolute:

初始位置:

技术分享图片

absolute相对于absolute移动后:

技术分享图片

 

技术分享图片

 

 移动后:

 

技术分享图片

 6.一般设计方式:

技术分享图片

案例:

技术分享图片

 区别:

 技术分享图片

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

原文:https://www.cnblogs.com/itboxue/p/11695620.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!