css-position&z-index显示问题

example

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #mask {
        color: #fff;
        text-align: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10002;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .6);
    }
 
    #target {
        /* position: fixed; */
        position: relative;
        /* position: absolute; */
        /* position: static; */
        z-index: 1;
        top: 50px;
    }
 
    #target span,
    #target1 span {
        background-color: yellow;
        position: relative;
        z-index: 10004;
    }
</style>
 
<body>
    <div id="target"><span>target position !static;show target z-index: 10004;</span></div>
    <div id="target1"><span>show target1 z-index: 10004;</span></div>
    <div id="mask" onclick="console.log(this.style.display='none')">
        z-index:10002
    </div>
</body>
 
</html>

posted @ 2021-10-13 17:54 zc-lee 阅读(37) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

公告

zc-lee.github.io

昵称： zc-lee
园龄： 6年1个月
粉丝： 199861
关注： 8865

+加关注

2025年3月

日

一

二

三

四

五

六

zc-lee

lee1384@163.com

css-position&z-index显示问题

css-position&z-index显示问题

example

公告

搜索

常用链接

最新随笔

积分与排名

随笔分类 (391)

随笔档案 (253)

文章分类 (16)

文章档案 (19)

lee

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<style>
	#mask {
	color: #fff;
	text-align: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10002;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .6);
	}

	#target {
	/* position: fixed; */
	position: relative;
	/* position: absolute; */
	/* position: static; */
	z-index: 1;
	top: 50px;
	}

	#target span,
	#target1 span {
	background-color: yellow;
	position: relative;
	z-index: 10004;
	}
	</style>

	<body>
	<div id="target"><span>target position !static;show target z-index: 10004;</span></div>
	<div id="target1"><span>show target1 z-index: 10004;</span></div>
	<div id="mask" onclick="console.log(this.style.display='none')">
	z-index:10002
	</div>
	</body>

	</html>