微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

关于stacking context和CSS z-index的总结_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:39:53
原创
1551人浏览过

html中决定元素叠加顺序的css属性最有名的应该是z-index了。但是，往往在项目中发现有些情况和我们的预期不太一致。经过研究和学习，总算搞清楚了其中的关系。简单总结如下： 

  1. 只有Positioned（Position不为static的元素）元素的z-index属性才有效
  2. z-index可以是负数
  3. 没有z-index或z-index无效的元素（参见第一条）相当于z-index为0；
  4. 符合某些条件的元素，浏览器会为它们创建一个叫stacking context的东东。根据DOM树结构，stacking context也会形成一个树形结构。
  5. 一个stacking context中的元素会根据z-index决定叠加顺序。z-index大的靠前
  6. z-index 0级元素中，有stacking context的元素的叠加顺序靠前 
  7. 以上条件不能区分时，使用DOM树中的顺序决定叠加顺序。

其中细节很多，我也不确定自己的理解都是正确的。欢迎大家指正。

另外，下面是MDN中的一系列相关文章。逐层展开，写得很清楚，各位做WEB的同学可以学习一下。

绘ai
绘ai

ai绘图提示词免费分享

绘ai 153
查看详情 绘ai
  • Stacking without z-index : Default stacking rules
  • Stacking and float : How floating elements are handled
  • Adding z-index : Using z-index to change default stacking
  • The stacking context : Notes on the stacking context
  • Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
  • Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
  • Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level

    • 大家都在看：

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

    下载
    来源：php中文网
    收藏 点赞
    上一篇：月半小夜曲下的畅想DOCTYPE模式_html/css_WEB-ITnose 下一篇：Andorid中对HTML格式数据进行解码_html/css_WEB-ITnose
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    最新问题
    html5水平导航怎么写_HTML5横向导航栏实现方案 使用语义化HTML5标签和CSS实现水平导航栏。1.用包裹列表结构，提升可访问性与SEO；2.通过CSS设置display:inline-block使菜单项横向排列，并清除默认样式；3.可选媒体查询实现响应式布局，在小屏幕下垂直排列。注重细节如链接点击区域与悬停效果，确保兼容性与用户体验。
    2025-11-18 18:00:02
    317
    如何解决在线编辑HTML时内存溢出的处理方法 在线编辑HTML内存溢出主因是DOM复杂、资源过多或JS循环，需简化结构、优化脚本、控制加载并用工具监控内存。
    2025-11-18 17:37:02
    299
    html代码怎么调用_js函数在html中调用方法与事件绑定技巧 答案：HTML与JavaScript交互可通过内联事件调用、addEventListener绑定、外部JS引入、data属性传参及页面加载事件实现。具体包括在标签中使用onclick直接调用函数；通过getElementById结合addEventListener绑定多种事件；将JS代码分离至外部文件提升维护性；利用data-*属性传递参数增强灵活性；以及使用window.onload或DOMContentLoaded在页面加载后自动执行初始化函数。
    2025-11-18 16:59:02
    344
    Mac右键HTML文件如何快速选择Brackets打开？ 可通过系统设置或第三方工具实现Mac右键用Brackets打开HTML文件：一、在“显示简介”中设置默认打开方式并点击“全部更改”；二、使用Automator创建“快速操作”服务，通过AppleScript脚本实现右键菜单快捷选项；三、安装SwiftDefaultApps等工具，在文件类型标签页中将.html和.htm关联至Brackets。三种方法均可有效提升操作效率。
    2025-11-18 16:49:02
    367
    Windows XAMPP中HTML如何正确引用CSS避免404 404错误通常由路径配置不当引起，确保HTML和CSS文件置于C:\xampp\htdocs\your-project\下，通过http://localhost/your-project/访问，使用正确相对路径或以/开头的绝对路径引用CSS，并在浏览器开发者工具中检查网络请求以确认路径与MIME类型，避免使用反斜杠或本地磁盘路径。
    2025-11-18 15:59:45
    113
    VS Code Emmet飞速生成HTML+CSS整套骨架！ 使用Emmet可大幅提升HTML/CSS编写效率，首先在VSCode中新建index.html并输入!或html:5生成HTML5骨架；接着通过header>nav>ul>li*3>a等嵌套语法快速构建多层级结构；随后依据HTML类名在style.css中同步生成对应选择器框架；最后通过修改settings.json配置自定义缩写如myboiler，实现项目专属代码片段一键生成。
    2025-11-18 15:52:03
    609
    html 如何隐藏audio_HTML音频隐藏（display:none）与静音播放方法 使用CSS隐藏audio元素并保持播放能力；2.通过muted属性实现静音自动播放；3.JavaScript动态创建音频对象灵活控制；4.遵循浏览器策略，结合用户交互解除播放限制。
    2025-11-18 13:27:06
    653
    Nuxt Content v2 中禁用 Markdown 标题自动生成锚点链接 本文旨在解决NuxtContentv2在渲染Markdown或原生HTML标题时，默认自动生成锚点链接的问题。通过深入分析其默认行为，并提供在nuxt.config.ts文件中配置content.markdown.anchorLinks:false的简洁解决方案，开发者可以有效阻止标题被转换为带链接的元素，从而获得对内容渲染的完全控制，确保标题以纯文本形式呈现，提升内容展示的灵活性。
    2025-11-18 13:12:15
    647
    使用锚点链接和 JavaScript 精确控制页面滚动位置 本文介绍了如何使用锚点链接结合JavaScript，在页面加载后精确控制滚动位置，以解决固定头部遮挡锚点内容的问题。通过简单的代码示例，展示了如何延迟执行滚动操作，确保页面先滚动到锚点位置，再进行偏移，从而实现最佳的用户体验。
    2025-11-18 13:08:33
    806
    React 中获取下拉菜单选中值的正确方法 本文旨在讲解如何使用React正确获取下拉菜单（）中选中的值。我们将深入探讨React状态管理的异步性，并介绍如何利用useEffectHook来确保在状态更新后访问到最新的选中值。通过本文，你将掌握在React应用中处理下拉菜单选择事件的正确姿势。
    2025-11-18 13:08:11
    915
    相关专题
    更多>
    热门推荐
    开源免费商场系统广告
    热门教程
    更多>
    相关推荐
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
    php中文网：公益在线php培训，帮助PHP学习者快速成长！
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部