CSS盒子隐藏/显示后再最上层的示例分析
短信预约 -IT技能 免费直播动态提醒
小编给大家分享一下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 class="lazy" data-src="images/mi.png"><div class="m1" id="where1"><div id="m1img"><div id="img2"><img class="lazy" data-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 class="lazy" data-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 class="lazy" data-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 class="lazy" data-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 class="lazy" data-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 class="lazy" data-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 class="lazy" data-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 class="lazy" data-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盒子隐藏/显示后再最上层的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
