html - z-index 没有将元素带到顶部

Question

我有一个 div，它是一个向下箭头的图片，当用户点击它时，它应该递减一个数字，但是我无法触发点击，因为它似乎在另一个元素下方。

为了解释 html，它是两个引导网格系统行，但是向下箭头图像在最上面一行，但是，它被拉低了，所以最下面一行在它上面。

图片:

这是向下箭头的 css(它有一个高 z-index):

#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)。

因此，将 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;
}