《css定位 position》课程手记

概述

这是我学习课程css定位 position时做的笔记!

本节内容

• html的三种布局方式
• position可选参数
• z-index
• 盒子模型和定位的区别
• 侧边栏导航跟随实例

html的三种布局方式

三种布局：标准流，浮动，定位

两大元素：块级元素（div,h1-6,table,ol,ul,li,p）,内联元素（a,span,img,input）

position可选参数

static（标准流中正常排列）

relative（相对定位）

absolute（绝对定位）

fixed（脱离正常的文档流，登录弹窗，内联广告，不受制于父元素）

inherit（继承父元素的position属性）

z-index

z-index大的元素会覆盖z-index小的元素

z-index为auto的元素不参与层级比较

z-index为负值，会被普通流中的层级覆盖

只作用于position为除static之外的定位属性

父元素层级的优势

盒子模型和定位的区别

盒子模型通过内外边距来实现移动，定位则通过位置来实现移动。

慕课网的登录界面的定位实例（有遮罩）

侧边栏导航跟随实例

一级栏目用div，二级栏目用ul和li，三级栏目用div

三级栏目用absolute定位在右边展开

二三级栏目一开始用display：none,然后用hover:display:block