html - 在没有 JS 的情况下调整灯箱的位置

Question

我在可滚动页面的 div 中有一个灯箱图像。

我使用 % 中的所有内容，这样无论是移动设备还是桌面设备，每张图片都会适应屏幕尺寸。

问题是，当我在移动设备上访问我的网站并点击灯箱时，它会出现在页面底部!如何将灯箱的位置设置为出现在可点击图像的前面？

我的 HTML 是:

<input type="checkbox" id="check" style="display:none;">
<label for="check">

<div id="biteme"><img src="biteme.png"></div>
 </label>

<label for="check">
    <div id="cover">
    <div id="box">
    <img src="promociones.png" width="80%">
    </div>
    </div>
    </label> 

我的 CSS 是:

#biteme {
    padding-top:0;
    padding-bottom:0;
}

#check:checked ~ label #cover{
    display:block;
    background:none;
    }

#cover{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:none;
    display:none;
    }
    #box{
    position: inherit;
    top:313%;
    bottom:0;
    left:16%;
    right:0;
    margin:auto;
    width:80%;
    height:auto;
    border:none;
    opacity:0.9;
    background-color:transparent;
    background:none;
    }

Answer 1

如果您可以将它们切换到合适的位置。您也可以使用 z-index 对框重新排序。