HTML——隐藏标签+z-index

最新推荐文章于 2024-03-18 23:17:23 发布

Jhinhua

最新推荐文章于 2024-03-18 23:17:23 发布

阅读量446

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/piduocheng0577/article/details/104906105

Web前端专栏收录该内容

72 篇文章

订阅专栏

本文介绍如何使用CSS的visibility, opacity属性来隐藏元素，以及利用z-index属性控制元素的堆叠顺序。通过实例展示了当鼠标悬浮在文档上如何改变图片的可见性和透明度，以及如何使div元素在鼠标悬浮时上升到最顶层。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

隐藏标签
z-index

隐藏标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>隐藏标签</title>
		<style>
			body{
				background-color: palegoldenrod;
			}
			div{
				width: 200px;
				height: 200px;
				background-color: palevioletred;
			}
			/* 鼠标悬浮在文档 隐藏图片 */
			body:hover img{
				/* display 隐藏之后标签的位置不会保留 */
				/* display: none; */
				/* 下面的这几种方式都是保留位置的 */
				/* 
				设置是否可见
				 visible 可见的
				 hidden  隐藏的
				 */
				/* visibility: hidden; */
				/* 设置透明 opacity
				 0到1  0表示完全透明 1表示完全不透明
				 */
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<img src="../img/img2.png" />
		<div></div>
	</body>
</html>

z-index

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				/* 相对于body */
				position: absolute;
				top: 50px;
			}
			.div1{
				background-color: palevioletred;
				left: 50px;
				z-index: 3;
			}
			.div2{
				background-color: deepskyblue;
				left: 100px;
				z-index: 2;
			}
			.div3{
				background-color: darkcyan;
				left: 150px;
				z-index: 1;
			}
			
			/* 鼠标悬浮到标签  z-index发生变化 */
			div:hover{
				z-index: 4;
			}
			
		</style>
	</head>
	<body>
		<!-- 几个div相对同一个参照物进行定位 然后又叠加部分
		 当我鼠标悬浮到哪个div哪个div就在最前面
		 -->
		 <div class="div1"></div>
		 <div class="div2"></div>
		 <div class="div3"></div>
		 
		 
	</body>
</html>