css hover变成手_CSS定位

本资料来源于饥人谷

CSS布局和定位有啥区别

布局是屏幕平面上的 定位是垂直于屏幕的

一个div的分层

正常的文字，谁出现的晚，谁在更上面

浮动元素脱离文档流

新属性-position

position

• static：默认值，当前元素在文档流里（一般不写)
• relative：相对定位，升起来，但不脱离文档流
• absolute：绝对定位，定位基准是祖先里的非static
• fixed：固定定位，定位基准是viewport（有诈）
• sticky：粘滞定位，不好描述直接举例

经验

• 如果你写了absolute，一般都得补一个relative
• 如果你写了absolute或fixed，一定要补top和left
• sticky兼容性很差，几乎不能用

position：relative

使用场景

• 用于做位移（很少用，基本上都能用其他属性代替）
• 用于给absolute元素做爸爸

配合z-index

• z-index:默认值auto，计算出来的值是0，不创建新层叠上下文
• z-index：0/1/2
  或
  z-index：-1/-2
  都可取
  谁的z-index越大 谁在上面

经验

• 写z-index：9999都是彩笔
• 学会管理z-index

position：absolute

使用场景

• 脱离原来的位置，另起一层，比如对话框的关闭按钮

http://js.jirengu.com/hikaluzasu/1/edit?html,css,output/

• 鼠标提示

设置提示内容默认看不见 鼠标移到上方时能看见

button span{
    display:none;
}
button:hover span{
    display:inline-block;
}

需要检查时在开发者工具中选择hov中的hover 可以展示hover内容

配合z-index

经验

• 很多彩笔都以为absolute是相对于realtive定位的，实际上是相对祖先元素中最近的一个定位元素定位的，只要不是static就是定位元素。
• 某些浏览器上如果不写top/left会位置错乱。
• 善用left：100%
• 善用left：50%；加负margin

position：fixed

http://js.jirengu.com/docadimofu/1/edit?html,css,output

使用场景

• 烦人的广告
• 回到顶部按钮

配合z-index

经验

• 手机上尽量不要用这个属性，坑很多
• 不信搜索 移动端fixed

一个div的分层

如果在某个地方定了位，就超越了文字，变成了定位元素。

层叠上下文

比喻

• 每个层叠上下文就是一个新的小世界（作用域）
• 这个小世界里面的z-index跟外界无关
• 处在同一个小世界的z-index才能比较

哪些不正交的属性可以创建它

• 标准答案：参考MDN文档（层叠上下文MDN）
• 日常记忆：z-index/flex/opacity/transform

负z-index与层叠上下文

记住z-index逃不出小世界

http://js.jirengu.com/famopocewe/1/edit?html,css,output

小技巧

1. 调试rgba透明度时按住alt再按下箭头，可以逐次减小0.1
2. white-space:nowarp;文字内容不准换行