Z-index 无法将图像保持在顶部...打开/关闭图像，菜单被隐藏 [英] Z-index not working to keep an image on top... Toggle on/off image, menu gets hidden
本文介绍了Z-index 无法将图像保持在顶部...打开/关闭图像，菜单被隐藏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我使用输入复选框来打开/关闭主容器 div 背景顶部的吉祥物标志.标志必须像背景一样从左上角 0 开始，但当我打开它以显示吉祥物标志时，带有复选框的菜单被隐藏.
我的 z-index 不起作用，我正在寻找任何解决方案来将复选框的菜单组保持在最重要的位置.
谢谢
body, html {高度:100%；}#地图 {背景图片:网址(https://image.freepik.com/free-vector/vector-illustration-mountain-landscape_1441-71.jpg)；高度:1080px；宽度:1080px；背景位置:中心；背景重复:不重复；背景尺寸:1080px 1080px；位置:相对；}#菜单 {显示:块；宽度:100px；}输入:选中 + .hidable {显示:无；位置:绝对；z-索引:10；}输入:不(:检查)+ .showable {显示:无；位置:绝对；z-索引:10；}#mascot1 {位置:绝对；顶部:0px；左:0px；z-索引:1；}<头><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="styles.css"><title>启动页面</title><身体><div id="地图"><div id="菜单"><input type="checkbox"/>吉祥物 1<div class="showable"><img id="mascot1" src="https://banner2.cleanpng.com/20180510/fkq/kisspng-tiger-mascot-5af4168e2aa482.253719421525945998174599817地图位置"></div><input type="checkbox"/>吉祥物 2<div class="showable"><img id="mascot2" src="https://banner2.cleanpng.com/20180510/fkq/kisspng-tiger-mascot-5af4168e2aa482.253719421525945998174599817地图位置"></div><input type="checkbox"/>吉祥物 3<div class="showable"><img id="mascot3" src="https://banner2.cleanpng.com/20180510/fkq/kisspng-tiger-mascot-5af4168e2aa482.253719421525945998174599817地图位置"></div></html>
解决方案
添加一个负 z-index 到所有图像和 z-index:0 到主包装纸.然后您可以删除所有其他 z-index
body,html {高度:100%；}#地图 {背景图片:网址(https://image.freepik.com/free-vector/vector-illustration-mountain-landscape_1441-71.jpg)；高度:1080px；宽度:1080px；背景位置:中心；背景重复:不重复；背景尺寸:1080px 1080px；位置:相对；z-索引:0}#菜单 {显示:网格；网格模板列:自动 1fr；}输入:选中+.hidable，输入:不(:检查)+.showable {显示:无；}.showable {位置:绝对；顶部:0px；左:0px；z-索引:-1；}<div id="菜单"><input type="checkbox"/>吉祥物 1 长文本在这里<div class="showable"><img id="mascot1" src="https://banner2.cleanpng.com/20180510/fkq/kisspng-tiger-mascot-5af4168e2aa482.253719421525945998174599817地图位置"></div><input type="checkbox"/>吉祥物 2<div class="showable"><img id="mascot2" src="https://banner2.cleanpng.com/20180510/fkq/kisspng-tiger-mascot-5af4168e2aa482.253719421525945998174599817地图位置"></div><input type="checkbox"/>吉祥物 3<div class="showable"><img id="mascot3" src="https://banner2.cleanpng.com/20180510/fkq/kisspng-tiger-mascot-5af4168e2aa482.253719421525945998174599817地图位置"></div>与 mroe 相关的详细信息:为什么具有 z-index 值的元素不能覆盖其子元素?>
So I am using the input checkbox to toggle on/off the mascot logo on top of the main container div's background. The logo has to start in the top 0 left 0 just like the background but when I toggle it on to show the mascot logo the menu with the check boxes is hidden.
My z-index won't work and I am looking for any solutions to keep the menu group of checkboxes on top of all.
Thanks
body, html {
height: 100%;
}
#map {
background-image: url(https://image.freepik.com/free-vector/vector-illustration-mountain-landscape_1441-71.jpg);
height: 1080px;
width: 1080px;
background-position: center;
background-repeat: no-repeat;
background-size: 1080px 1080px;
position: relative;
}
#menu {
display: block;
width: 100px;
}
input:checked + .hidable {
display: none;
position: absolute;
z-index: 10;
}
input:not(:checked) + .showable {
display: none;
position: absolute;
z-index: 10;
}
#mascot1 {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>Splash Page</title>
</head>
<body>
<div id="map">
<div id="menu">
<input type="checkbox" /> Mascot 1
<div class="showable"><img id="mascot1" src="https://banner2.cleanpng.com/20180510/fkq/kisspng-tiger-mascot-5af4168e2aa482.2537194215259459981747.jpg" alt="Map Locations"></div>
<input type="checkbox" /> Mascot 2
<div class="showable"><img id="mascot2" src="https://banner2.cleanpng.com/20180510/fkq/kisspng-tiger-mascot-5af4168e2aa482.2537194215259459981747.jpg" alt="Map Locations"></div>
<input type="checkbox" /> Mascot 3
<div class="showable"><img id="mascot3" src="https://banner2.cleanpng.com/20180510/fkq/kisspng-tiger-mascot-5af4168e2aa482.2537194215259459981747.jpg" alt="Map Locations"></div>
</div>
</div>
</body>
</html>
解决方案
add a negative z-index to all the image and z-index:0 to the main wrapper. You can then remove all the other z-index
body,
html {
height: 100%;
}
#map {
background-image: url(https://image.freepik.com/free-vector/vector-illustration-mountain-landscape_1441-71.jpg);
height: 1080px;
width: 1080px;
background-position: center;
background-repeat: no-repeat;
background-size: 1080px 1080px;
position: relative;
z-index: 0
}
#menu {
display: grid;
grid-template-columns:auto 1fr;
}
input:checked+.hidable,
input:not(:checked)+.showable {
display: none;
}
.showable {
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
<div id="map">
<div id="menu">
<input type="checkbox" /> Mascot 1 long text here
<div class="showable"><img id="mascot1" src="https://banner2.cleanpng.com/20180510/fkq/kisspng-tiger-mascot-5af4168e2aa482.2537194215259459981747.jpg" alt="Map Locations"></div>
<input type="checkbox" /> Mascot 2
<div class="showable"><img id="mascot2" src="https://banner2.cleanpng.com/20180510/fkq/kisspng-tiger-mascot-5af4168e2aa482.2537194215259459981747.jpg" alt="Map Locations"></div>
<input type="checkbox" /> Mascot 3
<div class="showable"><img id="mascot3" src="https://banner2.cleanpng.com/20180510/fkq/kisspng-tiger-mascot-5af4168e2aa482.2537194215259459981747.jpg" alt="Map Locations"></div>
</div>
</div>
Related for mroe details: Why can't an element with a z-index value cover its child?
这篇关于Z-index 无法将图像保持在顶部...打开/关闭图像，菜单被隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
