html - 缩小页面时不可点击的元素

Question

我的退出页面元素有问题。我在页面右侧创建了一个大“X”。这是用于退出当前内容的可点击元素。

这个元素有一个代码:

.section-modal .close-modal {
    position: fixed;
    top: 25px;
    right: 25px;
    width: 75px;
    height: 75px;
    background-color: transparent;
    cursor: pointer;
}

.section-modal .close-modal:hover {
    opacity: .3;
}

.section-modal .close-modal .lr {
    z-index: 1051;
    width: 5px;
    height: 75px;
    margin-left: 35px;
    background-color: #222;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.section-modal .close-modal .lr .rl {
    z-index: 1052;
    width: 5px;
    height: 75px;
    background-color: #222;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

我在页面的顶部中间有一个 Logo 图像。这是一个代码:

     <div class="close-modal" data-dismiss="modal">
       <div class="lr">
         <div class="rl">

         </div>
        </div>
      </div>

      <div class="container">
        <div class="row">
           <div class="col-md-12 col-sm-12">
              <img src="img\Logo2.png" class="img-responsive" style="margin: 0 auto; z-index: -1" alt="...">

当我缩小页面时，我的 Logo 附近有一个“X”，但我无法单击并返回主页。我无法解决此解决方案。请帮忙。

如果您需要更多信息，请告诉我，我将编辑一个问题。

Answer 1

很难从您的代码中分辨出来，但我猜问题出在 Logo 与“x”按钮重叠。为了确定，请右键单击“x”并选择“检查元素”。

如果打开的元素选项卡集中在 img 标签上而不是 'x' 那就是你的问题。要解决它，请给它一个 z-index:

.section-modal .close-modal {
    position: fixed;
    top: 25px;
    right: 25px;
    width: 75px;
    height: 75px;
    background-color: transparent;
    cursor: pointer;
    z-index: 100
}