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重新排序框。

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

1 个答案: