为什么z-index不生效? 我终于搞懂了CSS层叠和层叠上下文!

最新推荐文章于 2024-05-31 19:50:46 发布

7Mouse

最新推荐文章于 2024-05-31 19:50:46 发布

阅读量2k

点赞数 1

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_44555774/article/details/109695764

版权

本文通过一个项目实例，深入解析了CSS中z-index为何有时不生效的原因，主要涉及层叠上下文、层叠优先级等概念。通过分析，指出只有具有堆叠上下文的元素设置z-index才有效，并探讨了浮动元素、定位元素以及CSS3新特性如何影响层叠。最后，提供了解决项目问题的具体方法和避免层叠问题的建议。

摘要由CSDN通过智能技术生成

最近在写项目的时候遇到了一些疑惑的问题, 先附上Demo代码
应该实现的效果是 container面板覆盖左菜单, 当点击按钮的时候, container左移, 展示左菜单
但是左菜单由于使用了position: absolute, 一直置前

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>测试Demo</title>
	<style>
		html, body, div {
    
			margin: 0;
			padding: 0;
		}
		#app {
    
			position: relative;
			min-height: 100vh;
			width: 100vw;
			background-color: #DDD;
			overflow: hidden;
		}
		.container {
    
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			width: 100