如何使我的关闭按钮在不同尺寸的屏幕上工作?

Question

为什么我的。closebtn不能在其他尺寸的屏幕上工作，我该如何修复它?HTML

<a href="javascript:void(0)" class="closebtn" onclick="closeSection('figurative1')">&times;</a>

CSS

.closebtn {
position: absolute;
top: 10px;
right: 39px;
font-size: 40px;
color: rgb(250, 3, 3);
text-decoration: none;
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
#figurative1 .closebtn,  #painting1 .closebtn,  #portret1 .closebtn,  #stilllife1 
.closebtn,  #landscape1 .closebtn  {
top: 5px;
right: 8px;
font-size: 30px;
color: rgb(250, 3, 3);
text-decoration: none;
position: absolute;
}
}

JS

function openSection(id) {
let element = document.getElementById(id);
element.style.width = "100%";
showSlides(1, element);
}
function closeSection(id) {
document.getElementById(id).style.width = "0%";
}

https://codepen.io/tatarusetskaya/pen/XWpzNZa

Answer 1

其他绘制在按钮上的元素，如果你将按钮的z-index调高，它将再次成为可点击的

.closebtn {
z-index: 99
}

https://codepen.io/leelenaleee/pen/NWjEYpP

Answer 2

把z-index:1给.closebtn。

看看这个:CODEPEN