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

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

7Mouse

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

阅读量1.9k

点赞数 1

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

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

版权

最近在写项目的时候遇到了一些疑惑的问题, 先附上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%;