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仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。

因此，请在您的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;
}

z-index没有把元素带到顶部

2 个答案: