大佬教程收集整理的这篇文章主要介绍了CSS 上下文 onclick 菜单在切换时更改 z-index 以允许覆盖的空间进行交互，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
以下机制允许创建一个下拉菜单，该菜单仅在其可见性被切换时被点击时出现。
button + .dd_menu:active,button:focus + .dd_menu {
visibility: visible;
}
.ul_dd_menu_lang {
BACkground-color: rgba(255,255,0.89);
border: 1px solID rgba(169,156,0.45);
padding-left: 7px;
padding-top: 7px;
}
这被放置在一个标题容器中
#admin-header_container {
position: fixed;
wIDth: 100%;
height: 40px;
top: 0px;
z-index: 100;
}
哪里
<div ID='admin-header_container'>
<button><%= I18n.locale %></button>
<nav class='dd_menu'>
<ul class='ul_dd_menu_lang'>
<% I18n.available_locales.each do |locale| %>
<% next if locale == I18n.locale %>
<li class='dd_item'><%= link_to locale.to_s,url_for( request.params.merge(locale: localE)),class: 'locale' %>
</li>
<% end %>
</ul>
</nav>
</div>
主容器及其内容从标题下方开始，但滚动时会滑动到其下方
#admin-container {
wIDth:100%;
display: table;
margin-top:60px;
padding-bottom:60px;
*zoom:1;
position: absolute;
z-index: 10;
}
#admin-content{
margin:0 auto;
padding: 0 7px 0 7px;
}
然而，这意味着无论 dd_menu 的高度如何，该高度都将被父值继承并“覆盖”该高度内的任何内容，使对象无法点击。
This jsfiddle Replicates 问题。让检查器将无序列表显示为活动状态有点棘手，但仍然选择 <div class='cell small-2'> 显示父元素的高度为 105，包含所有 ul 组件
因此 z-index 是问题属性。如何处理使管理内容完全交互？
事实证明 z-index 没有起作用，包装类保持其位置。
#admin-header_container {
z-索引：100；
}
然而，切换可见性的技巧是红鲱鱼。正确的方法是在 active 类上调用 display 并切换该值。
.dd_menu {
/* visibility: hidden; */
display: none;
}
button:focus + .dd_menu {
/* visibility: visible; */
display: inline;
}
button + .dd_menu:active {
/* visibility: visible; */
display: inline;
}
有问题的 jsfiddle 参考被调整为允许在伪类的两个实例之间切换。
以上是大佬教程为你收集整理的CSS 上下文 onclick 菜单在切换时更改 z-index 以允许覆盖的空间进行交互全部内容，希望文章能够帮你解决CSS 上下文 onclick 菜单在切换时更改 z-index 以允许覆盖的空间进行交互所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。