2020-1-22 css定位笔记

一、css 定位基础笔记

1.position： (posit 放，放置 + ion 表名词 → 放出的〔立场〕=位置)
static(默认) (stat 站，立 + ic …的 → 立着不动的 → 静止的)
relative (adj.相对于 n.亲戚)
absolute (绝对的)
fixed (fix 使固定)
sticky (粘性的)
z-index (量度)

2.relative：
如果未设置定位偏移量，对本身无影响
不使元素脱离文档流
不影响其他元素布局
left、top、right、bottom 是相对于‘自身’偏移

3.absolute:
使元素完全脱离文档流
使内联元素支持宽高（让内联具备快的性质）
使快元素的宽高由内容决定（让快决定内联的性质）
如果祖先元素有定位，则相对祖先元素位移，无的话相对文本位移

4.fixed:
使元素完全脱离文档流
使内联元素支持宽高（让内联具备快的性质）
使快元素的宽高由内容决定（让快决定内联的性质）
相对整个浏览窗口进行偏移

5.sticky黏性定位
在指定位置，进行黏性定位
（暂时认为：只对一级标签管用）

6.z-index定位层级
a.存在position时，z-index才生效
b.优先考虑同级或者父级的z-index

学习时测试代码

二、定位实现下拉列表框
1.写好样式并定好位后，用 display:none 隐藏
2.利用伪元素 :hover{dispaly:block} 显示