Z索引未將元素置於頂部

Question

我有一個div，它是一個向下箭頭的圖片，當用戶單擊它時，它應該減小一個數字，但是我無法觸發該單擊，因為它似乎在另一個元素下面。

為了解釋html，它是兩行引導網格系統行，但是向下箭頭圖像在頂部行中，但是它向下下拉，因此底部行位於其頂部。

圖片：

這是向下箭頭的css（它具有較高的z索引）：

#down-arrow-icon {
  background: url("../../assets/images/home_page/down-arrow.svg") center no-repeat;
  background-size: 100%;
  width: 40px;
  height: 40px;
  z-index: 9999;
}

HTML：

<div class="row" style="margin-bottom: 10px;">
            <div class="col-sm-2 col-md-3 col-lg-4"></div>
            <div class="col-sm-8 col-md-6 col-lg-4" align="center" style="height: 200px;display: flex;align-items: center;margin-top:-60px;">
  <div style="margin-right:20px;">
      <div id="up-arrow-icon" data-bind="click: incrementDistance"></div>
      <label data-bind="text: numberDistance" style="border:1px solid #fff; 
                border-radius: 50px; 
                width:100px; 
                height: 100px;
                font-weight:100;
                line-height:96px;
                color: #FFFFFF;
                font-size: 44px;">11</label>
      <div id="down-arrow-icon" data-bind="click: decrementDistance"></div>
  </div>
    <div id="search-button" class="form-group" style="float:right;">
        <label id="distance-type">KILOMETERS</label>
        <div class="form-control-icon" id="switch-icon"></div>
    </div>
</div>
            <div class="col-sm-2 col-md-3 col-lg-4"></div>
        </div>

<div class="row" style="margin-bottom: 10px;">
            <div class="col-sm-2 col-md-3 col-lg-4"></div>
            <div class="col-sm-8 col-md-6 col-lg-4" align="center" style="margin-top: -73px;">
                <h1 id="search-filter-heading" class="heading form-group">OF
                </h1>
            </div>
            <div class="col-sm-2 col-md-3 col-lg-4"></div>
        </div>

如何使向下箭頭位於頂部，以便記錄點擊次數？

Answer 1

z-index僅適用於定位的元素（position：absolute，position：relative或position：fixed）。

因此，在您的CSS中添加position:relative/absolute/fixed 。

即，您的新CSS就像

#down-arrow-icon {
  background: url("../../assets/images/home_page/down-arrow.svg") center no-repeat;
  background-size: 100%;
  width: 40px;
  height: 40px;
  position:relative;
  z-index: 9999;
}

Answer 2

請申請職位：z-index的親戚才能工作

#down-arrow-icon {
  background: url("../../assets/images/home_page/down-arrow.svg") center no-repeat;
  background-size: 100%;
  width: 40px;
  height: 40px;
  position: relative
  z-index: 9999;
}