CSS盒子隐藏/显示后再最上层的实现代码

发布时间：2020-05-15 15:34:53 作者：小高写BUG

这篇文章主要介绍了CSS盒子隐藏/显示后再最上层的实现代码,代码简答易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

在这里插入图片描述

.imgbox{	
	width: 1200px;
	height: 612px;
	margin-right: auto;
    margin-left: auto;
    margin-top: 60px;   
}
.m1{
	border: solid;
	border-width:  1px;		
	height: 300px;
	width: 227px;
	

}
#m1img{
	text-align:center;
	padding-top: 55px;	    
}
#img2{
	margin-bottom: 35px;
}
p>span {
	text-decoration:line-through;
}

#where1{
	position: absolute;
	left:412px;
	top: 60px;
}
#where2{
	position: absolute;
	left:651px;
	top: 60px;
}
#where3{
	position: absolute;
	left:890px;
	top: 60px;
}
#where4{
	position: absolute;
	left:1129px;
	top: 60px;
}
#where5{
	position: absolute;
	left:412px;
	top: 372px;
}
#where6{
	position: absolute;
	left:651px;
	top: 372px;
}
#where7{
	position: absolute;
	left:890px;
	top: 372px;
}
#where8{
	position: absolute;
	left:1129px;
	top: 372px;
}
 #sbox{
    height:76px;
	width: 227px;
	background-color: #ff6700;
	opacity: 0;/*隐身*/
	z-index:999;
	position: absolute;
	bottom: -0.5px;
}
#where1:hover #sbox{
	opacity: 1;	
}
#where2:hover #sbox{
	opacity: 1;	(显示)
}
#where3:hover #sbox{
	opacity: 1;	
}
#where4:hover #sbox{
	opacity: 1;	
}
#where5:hover #sbox{
	opacity: 1;	
}
#where6:hover #sbox{
	opacity: 1;	
}
#where7:hover #sbox{
	opacity: 1;	
}
#where8:hover #sbox{
	opacity: 1;	
}
#sboxp{
	line-height: 76px;
	color: white;
}

在这里插入图片描述

HTML的代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" type="text/css" href="css/1.css">
	<link rel="stylesheet" type="text/css" href="css/normalize.css">
</head>
<body>
	<div class="imgbox">
	    <img src="images/mi.png">		
		<div class="m1" id="where1">
			<div id="m1img">
				<div id="img2"><img src="images/m1.png"></div>
                <p>小米电视3</p>
                <p>999元 <span>1199元</span></p>
                <div id="sbox"><p id="sboxp">小米电视促销</p></div>
			</div>
		</div>
		<div class="m1" id="where2">
			<div id="m1img">
				<div id="img2"><img src="images/m2.png"></div>
                <p>小米电视5</p>
                <p>1099元 <span>1399元</span></p>
                <div id="sbox"><p id="sboxp">小米电视促销</p></div>
			</div>
		</div>
		<div class="m1" id="where3">
			<div id="m1img">
				<div id="img2"><img src="images/m3.png"></div>
                <p>小米电脑</p>
                <p>4999元 <span>5199元</span></p>
                <div id="sbox"><p id="sboxp">小米电脑促销</p></div>
			</div>
		</div>
		<div class="m1" id="where4">
			<div id="m1img">
				<div id="img2"><img src="images/mi4.png"></div>
                <p>小米电脑</p>
                <p>5999元 <span>6199元</span></p>
                <div id="sbox"><p id="sboxp">小米电脑促销</p></div>
			</div>
		</div>
		<div class="m1" id="where5">
			<div id="m1img">
				<div id="img2"><img src="images/m1.png"></div>
                <p>小米电视3</p>
                <p>999元 <span>1199元</span></p>
                <div id="sbox"><p id="sboxp">小米电视促销</p></div>
			</div>
		</div>
		<div class="m1" id="where6">
			<div id="m1img">
				<div id="img2"><img src="images/m2.png"></div>
                <p>小米电视5</p>
                <p>1099元 <span>1399元</span></p>
                <div id="sbox"><p id="sboxp">小米电视促销</p></div>
			</div>
		</div>
		<div class="m1" id="where7">
			<div id="m1img">
				<div id="img2"><img src="images/m3.png"></div>
                <p>小米电脑</p>
                <p>4999元 <span>5199元</span></p>
                <div id="sbox"><p id="sboxp">小米电脑促销</p></div>
			</div>
		</div>
		<div class="m1" id="where8">
			<div id="m1img">
				<div id="img2"><img src="images/mi4.png"></div>
                <p>小米电脑</p>
                <p>5999元 <span>6199元</span></p>
                <div id="sbox"><p id="sboxp">小米电脑促销</p></div>
			</div>
		</div>				
	</div>
</body>
</html>

总结

到此这篇关于CSS盒子隐藏/显示后再最上层的实现代码的文章就介绍到这了,更多相关css 盒子隐藏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

Tag：css 盒子隐藏显示

CSS3打造的现代交互式登录界面详细实现过程
本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性，感兴趣的朋友跟随小编一起看看吧
2025-06-20
CSS普通流、浮动与定位网页布局三大机制及最佳实践
本文给大家讲解CSS 的三种核心布局机制——普通流(Normal Flow)、浮动(Float)和定位(Positioning)对于创建灵活、响应式的网页至关重要,本文将深入探讨这三种机制的工作原
2025-06-19
css实现角标效果并带有文章或图标效果(完整代码)
文章介绍如何用CSS实现角标效果,通过.active类结合::after和::before伪元素,利用定位、边框和旋转创建红色边框与白色三角形的提示标志,适用于按钮或卡片元素的视觉增强设计
2025-06-19
CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)
CSS Anchor Positioning是一项仍在草案中的新特性，由 Chrome 125 开始提供原生支持需启用实验 flag,它允许你在 CSS 中通过锚点（anchor）来相对于任意 DOM 元素定位,本文
2025-06-17
CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比
CSS 中的 position 属性用于控制元素的定位方式，不同的定位方式会影响元素在页面中的布局和层叠关系,以下是 static、relative、absolute、fixed、sticky 的详细对比和应用
2025-06-17
CSS place-items: center解析与用法详解
place-items: center; 是一个强大的 CSS 简写属性，用于同时控制网格(Grid) 和弹性盒(Flexbox) 布局中的对齐方式，本文给大家介绍CSS place-items: center；详解与用法
2025-06-17
CSS实现元素撑满剩余空间的五种方法
在日常开发中，我们经常需要让某个元素占据容器的剩余空间，本文将介绍5种不同的方法来实现这个需求，并分析各种方法的优缺点，感兴趣的朋友一起看看吧
2025-06-17
CSS中前端单位 px、vw、vh 等的区别与使用建议
CSS单位区别与使用场景总结：px绝对、vw/vh响应式,%继承父尺寸,em/rem文字缩放,vmin/vmax适应宽高变化,固定布局用px或%,响应式布局用vw/vh/rem,文字用em或rem，本文给大家
2025-06-16
CSS 样式表的四种应用方式及css注释的应用小结
这篇文章主要介绍了CSS 样式表的四种应用方式及css注释的应用小结,本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧
2025-05-21
CSS中padding基本概念及简单写法
在CSS布局中，padding属性是控制元素内容与其边框之间距离的关键工具，本文介绍CSS基础中padding，通过本文的介绍，我们深入了解了padding的基本概念、简写方法以及它对元
2025-05-16

CSS盒子隐藏/显示后再最上层的实现代码

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容