Question

我的退出页面元素有问题。我创造了一个大＆＃34; X＆＃34;在我页面的右侧。这是用于退出当前内容的可单击元素。

这个元素有一个代码：

.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);
}

我在页面的中间部分有一个徽标图片。这是一个代码：

     <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="...">

当我缩小页面时，我有＆＃34; X＆＃34;在我的徽标附近，但我无法点击并返回主页面。我无法解决这个问题。请帮忙。

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

Answer 1

从您的代码中很难说出来，但我猜测问题是徽标与“x”重叠。按钮。要确保，请右键点击＆＃39; x＆＃39;并选择＆＃39; Inspect element＆＃39;。

如果元素标签打开，重点放在img标签上，而不是在＆＃39; x＆＃39;那么这就是你的问题。要解决它，给它一个z-index：

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

Answer 2

这可能是堆叠上下文问题。

有关完全理解z-index行为的更多信息：

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

2 个答案: