层叠上下文
负z-index
block块状水平盒子
float浮动盒子
inline/inline-block水平盒子
z-index:auto/z-index:0
正z-index
写百度案例的时候碰到了点问题,pull在这里
目标样式(百度新闻导航栏效果):
这里要求只能用CSS实现,所以选择从元素的层级入手。
整体结构:
1 | <div> |
思路:
<div>
在最外层,提供背景
1 | div{ |
<ul>
和滑块.move
子绝父相,把滑块定位在第一个<li>
的位置。
1 | ul{ |
.move
和其他<li>
标签同级,这里需要让.move
在其他<li>
标签的下面移动
确定层级:
1 | ul: z-index:0; |
在通过通用选择器,当鼠标移动到每个<li>
标签时,让.move
移动位置:
1 | ul li:nth-child(2):hover~.move{ |
最终效果:
完整代码:
1 |
|
附:简单理解的七阶层叠水平
1 |
|
具体效果也可以查看本文头部的效果。原理不再赘述,可以参见上一篇文章点击跳转
- 本文链接: https://anyway521.github.io/post/34cdd258.html
- 最后更新:
- 版权声明: 博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议进行许可,转载请注明出处!