Z-インデックスが要素を持ち込まない

Question

下向きの矢印の画像であるdivがあり、ユーザーがクリックすると数値が下がるはずですが、下にあるように見えるのでクリックを獲得できません別の要素。

htmlを説明するには2つのブートストラップグリッドシステムの行ですが、下向きの矢印イメージは一番上の行にありますが、下にドロップされるので、一番下の行が上に移動します。

画像：

ここでは、下向きの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:relative/absolute/fixedをCSSに追加してください。

すなわち、あなたの新しい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

ようになる位置に適用してください：

#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; 
}