z-index轴在css中具体使用方法

<!doctype html> <html> <head><meta charset="utf-8" /><title> z-index轴在css中具体使用方法 - 腾云网 </title><meta id="description" name="description" content="始创于2008年，智慧网络营销服务提供商，历经10多年，服务客户超万家，遍布国内600多个城市。" /><meta id="keywords" name="keywords" content="z-index轴没有用,z-index轴不起作用,div层被遮挡的解决办法,网页中下拉菜单被挡住了怎么办,z-index使用方法,css中z-index的用法" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="/fresh/css/ML_index.css?v=1019" /><link rel="stylesheet" href="/fresh/css/ML_animate.min.css" /><link rel="stylesheet" href="/fresh/css/ML_swiper.min.css" /><link rel="stylesheet" href="/fresh/ML_font-awesome/css/font-awesome.css" /><link rel="stylesheet" href="/fresh/css/ML_siteTemplete.css" /> <script src="/fresh/js/ML_jquery.min.js"></script> <script src="/fresh/js/ML_swiper.min.js"></script> <script src="/fresh/js/ML_wow.js"></script> <link rel="stylesheet" href="/fresh/css/innerStyle.css" /><link rel="stylesheet" href="/fresh/layui-v2.7.6/layui/css/layui.css" /> <script src="/fresh/layui-v2.7.6/layui/layui.js"></script> <script src="/fresh/js/api.js"></script> </head> <style> .gmlc { height: auto !important; } </style> <body style="background-color: #f4f4f4" class="siteTempleteBody"> <script type="text/javascript"> gethead(); </script>  <div class="M_inbanner"> <img id="link" src="" /> <script type="text/javascript"> var link = getpicimorpantion(12); link = JSON.parse(link); $("#link").attr("src", homeurl + "/" + link.Path); </script> </div>   <div class="main_body">  <style> .on { background-color: #e9eaee !important; color: var(--main-color) !important; border-bottom: 3px solid var(--main-color) !important; } </style> <div class="main_left"> <ul> <li > <div class="L_nav_left"> <img class="r_img" src="/images/iknow1.png" alt=""> <img class="s_img" src="/images/know1.png" alt=""> <span>新手上路</span> </div> <i class="fa fa-angle-down"></i> </li> <div class="main_left_drop" > <a href="/help/162.htm">建站流程</a> <a href="/register">注册会员</a> <a href="/News/195.htm">使用教程</a> <a href="/findpwd">找回密码</a> </div> <li > <div class="L_nav_left"> <img class="r_img" src="/images/iknow2.png" alt=""> <img class="s_img" src="/images/know2.png" alt=""> <span>在线付款</span> </div> <i class="fa fa-angle-down"></i> </li> <div class="main_left_drop" > <a href="/online-pay">在线付款</a> <a href="/help/163.htm">转账汇款</a> </div> <li > <div class="L_nav_left"> <img class="r_img" src="/images/iknow3.png" alt=""> <img class="s_img" src="/images/know3.png" alt=""> <span>相关服务</span> </div> <i class="fa fa-angle-down"></i> </li> <div class="main_left_drop" > <a href="/News/170.htm">常见问题</a> <a href="/help/193.htm">备案须知</a> <a href="/help/173.htm">服务条款</a> <a href="/help/248.htm">投诉举报</a> </div> <li class="main_left_selected"> <div class="L_nav_left"> <img class="r_img" src="/images/iknow4.png" alt=""> <img class="s_img" src="/images/know4.png" alt=""> <span>新闻动态</span> </div> <i class="fa fa-angle-down"></i> </li> <div class="main_left_drop" style="display: block;"> <a href="/News/171.htm">网站优化</a> <a href="/News/224.htm">建站经验</a> <a href="/News/174.htm">网络营销</a> <a class="on" href="/News/238.htm">网页设计</a> <a href="/News/237.htm">技术文章</a> <a href="/News/281.htm">系统公告</a> </div> <li > <div class="L_nav_left"> <img class="r_img" src="/images/iknow5.png" alt=""> <img class="s_img" src="/images/know5.png" alt=""> <span>关于我们</span> </div> <i class="fa fa-angle-down"></i> </li> <div class="main_left_drop" > <a href="/aboutus" title="关于我们">关于我们</a> <a href="/about/200.htm" title="人才招聘">人才招聘</a> <a href="/about/202.htm" title="隐私保护">隐私保护</a> <a href="/contact" title="联系我们" target="_blank">联系我们</a> </div> </ul> </div> <script> $('.main_left ul li').click(function (e) { e.preventDefault(); var num_li = $('.main_left ul li').index(this) $('.main_left_drop').eq(num_li).slideToggle() $(this).addClass('main_left_selected').siblings().removeClass('main_left_selected') $('.main_left ul li i').eq(num_li).toggleClass('rroo') }); </script>   <div class="main_right"> <div class="main_right_title"> z-index轴在css中具体使用方法 </div> <div class="main_right_box"> <span id="lContent"><p>z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上（与X轴Y轴相对照）的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。</p><p><br/></p><p>原理性的东西就不说了，网上搜索一大堆，具体讲下z-index属性怎么使用。这个属性比较特别，并不是直接给div加个属性就能起作用的。需要满足2个条件：</p><p><span style="color: rgb(192, 0, 0);"><strong>条件一：作用的这个div的position属性不能是默认值</strong></span>（static默认值，没有定位）；<br/></p><p><span style="color: rgb(192, 0, 0);"><strong><span style="white-space: normal;">条件二：必须是亲兄弟间的div相互比较<span style="white-space: normal;">z-index轴</span></span></strong></span><span style="white-space: normal;"><span style="white-space: normal;">（<span style="white-space: normal;">需要是同一个父亲</span>）；</span></span></p><p><span style="white-space: normal;"><span style="white-space: normal;"><br/></span></span></p><p></p><p><strong>下面具体说下怎么操作</strong><br/></p><p><span style="color: rgb(192, 0, 0);">作用的这个div的position属性不能是默认值</span></p><p>一般情况下，如果这个div需要定位的，可以选择“absolute”或“fixed”值；如果仅仅是配合z-index使用，使z-index属性起作用，可以选择“relative”值。</p><p><span style="margin: 0px; padding: 0px; border: 0px; list-style: none; color: rgb(192, 0, 0);">必须是亲兄弟间的div相互比较z-index轴（需要是同一个父亲）</span></p><p>龙生龙，凤生凤，老鼠儿子爱打洞，这个就是类似继承关系。</p><p>举例：两个小伙之间比较地位高低有两种情况，</p><p>A：如果他们是同一个父亲的儿子，这个两小伙谁实力强，谁的地位就高。</p><p><img width="100%" src="/upload/7b86d0d4e20f400e867168a82c3f4c8a.png" _src="/upload/7b86d0d4e20f400e867168a82c3f4c8a.png" title="q01.png"/></p><p>B：如果两小伙的父亲不是同一个人，那么这两小伙的地位就是靠父亲之间的地位高低决定的。</p><p><img src="/upload/6d09a270bc2c47bfbf89085b1ee7b777.jpg" _src="/upload/6d09a270bc2c47bfbf89085b1ee7b777.jpg" title="q02.jpg"/></p><p><br/></p><p><strong>总结：</strong></p><p>如果是同一个父级div里的子div相比较，哪个<span style="white-space: normal;">子div</span>的z-index设置的高，哪个就排在前面；</p><p>如果是不同父级div里的子div相比较，就是这两个父级div相比较，谁的<span style="white-space: normal;">z-index设置的高，他们的父亲连同儿子地位都高。（这两个子div是不好比较的，他们的高低由父div决定）</span></p><p>　</p></span> </div> </div>  </div>  <script type="text/javascript"> getfoot(); </script> </body> </html>

CINXE.COM

z-index轴在css中具体使用方法 - 腾云网