CSS：图像上的z-index使得按钮无法点击

Question

我的首页横幅中有2个按钮。由于局限性，我需要将横幅图像发送到最后面，仅在横幅的背景颜色之前。

但是，使此按钮不可点击。我尝试对这些按钮使用肯定的索引，但没有结果。

CodePen ：

https://codepen.io/ogonzales/pen/YdvNqy

HTML：

{% load staticfiles %}

<div class="container-fluid my_home_banner my_header_bg_color">
    <div class="row">
        <div class="col-md-7">
            <br>
            <br>
            <div class="my_home_banner_left">
                <p class="my_home_banner_title">Stickers Personalizados</p>
                <p class="my_home_banner_subtitle">Easy online ordering, 4 day turnaround and free online proofs. Free
                    shipping.</p>
                <div class="row ">
                    <div class="col-md-6">
                        <a href="stickers" class="my_home_buttons btn btn-azul text-white btn-block">Comprar</a>
                    </div>
                    <br>
                    <div class="col-md-6">
                        <a href="{% url 'shop:SamplePackPage' %}"
                           class="my_home_buttons btn btn-naranja text-white btn-block">Muestras</a>
                    </div>
                </div>
            </div>
            <br>
            <br>
        </div>
        <div class="col-md-5">
            <img class="my_home_banner_image" src="{% static 'img/banner-home.png' %}"
                 width="380px" height="240px">
        </div>
    </div>
</div>

CSS：

.my_header_bg_color {
    /*background-color: #FF6138;*/
    background-color: #00A388;
    z-index: -9000;
}

.my_home_buttons {

    z-index: 99999999;
}

这里是一个类似的问题，但解决方案不适用于此处。

Z-index 'breaks' slideshow click buttons

Answer 1

取自here：

您可能正在尝试为z-index赋予负值，从而导致其他div重叠该按钮并使该按钮不可点击。相反，请尝试提供一个正值（大于按钮的z-index值）。

转到https://codepen.io/anon/pen/aPKpGo

.my_header_bg_color {
    /*background-color: #FF6138;*/
    background-color: #00A388;
    z-index: 9000;
}


.margin-left20 {
    margin-left: 20px;
}

@media (min-width: 220px) {

    .my_home_banner {
        /*height: 397px;*/
        margin: auto;
        position: relative;
    }

    .my_home_banner_title {
        font-size: 20px;
        color: white;
        font-weight: bold;
    }

    .my_home_banner_subtitle {
        font-size: 12px;
        color: white;
    }

    .btn, h2, p {
        margin-bottom: 16px;
    }


}

@media (min-width:300px) {

       .my_home_banner {
        /*height: 397px;*/
        margin: auto;
        position: relative;
    }

    .my_home_banner_title {
        font-size: 36px;
        color: white;
        font-weight: bold;
    }

    .my_home_banner_subtitle {
        font-size: 12px;
        color: white;
    }

    .btn, h2, p {
        margin-bottom: 16px;
    }

    .my_home_banner_image {
        position: absolute;
        bottom: 0%;
        margin-left: 10%;
        z-index: -1;
    }

}


@media (min-width:320px) {

       .my_home_banner {
        /*height: 397px;*/
        margin: auto;
        position: relative;
    }

    .my_home_banner_title {
        font-size: 44px;
        color: white;
        font-weight: bold;
    }

    .my_home_banner_subtitle {
        font-size: 14px;
        color: white;
    }

    .btn, h2, p {
        margin-bottom: 16px;
    }

}


@media (min-width:801px) {

    .my_home_banner {
        height: 360px;
        /*font-size: 10px;*/
        /*font-weight: bold;*/
        /*color: white;*/
        position: relative;
    }

    .my_home_banner_title {
        font-size: 48px;
        color: white;
        font-weight: bold;
    }

    .my_home_banner_image {
        position: absolute;
        bottom: 05%;
        margin-left: 08%;
    }
}



@media (min-width: 992px) {

    .my_home_banner {
        height: 397px;
        /*font-size: 10px;*/
        /*font-weight: bold;*/
        /*color: white;*/
        position: relative;
    }

    .my_home_banner_title {
        font-size: 44px;
        color: white;
        font-weight: bold;
    }

    .my_home_banner_image {
        position: absolute;
        bottom: -0%;
        margin-left: 08%;
    }

}


@media (min-width:1025px) {


    .my_home_banner {
        height: 397px;
        /*font-size: 40px;*/
        /*font-weight: bold;*/
        /*color: white;*/
        position: relative;
    }

    .my_home_banner_left {
        margin-left: -40%;
    }

    .my_home_banner_title {
        font-size: 60px;
        color: white;
        font-weight: bold;
    }

    .my_home_banner_image {
        position: absolute;
        bottom: -0%;
        margin-left: -08%;
    }

}

@media (min-width:1281px) { /* hi-res laptops and desktops */


    .my_home_banner {
        height: 397px;
        /*font-size: 40px;*/
        /*font-weight: bold;*/
        /*color: white;*/
        position: relative;
    }

    .my_home_banner_left {
        margin-left: -40%;
    }

    .my_home_banner_title {
        font-size: 60px;
        color: white;
        font-weight: bold;
    }

    .my_home_banner_image {
        position: absolute;
        bottom: -0%;
        margin-left: -08%;
    }

  
}


/* Buttons Styling */

a.btn-azul {
  text-decoration: none;
  background-color: #5ba4e6;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  letter-spacing: 0;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  background-image: linear-gradient(to bottom,rgba(255,255,255,.09) 0%,rgba(0,0,0,.09) 100%);
  font-size: 1.4rem;
  padding: 22px 30px;
  border-radius: 6px;
  border:none;
}

a.btn-azul:focus {
	outline:none;
}


a.btn-azul:hover {
  text-decoration: none;
  background-color: #7ab6eb;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  letter-spacing: 0;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  background-image: linear-gradient(to bottom,rgba(255,255,255,.09) 0%,rgba(0,0,0,.09) 100%);
  font-size: 1.4rem;
  padding: 22px 30px;
  border-radius: 6px;
  border:none;
}


a.btn-naranja {
  text-decoration: none;
  background-color: #ffa31a;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  letter-spacing: 0;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  background-image: linear-gradient(to bottom,rgba(255,255,250,.09) 0%,rgba(0,0,0,.09) 100%);
  font-size: 1.4rem;
  padding: 22px 30px;
  border-radius: 6px;
  border:none;
}

a.btn-naranja:focus {
	outline:none;
}




a.btn-naranja:hover {
  text-decoration: none;
  background-color: #ffad33;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  letter-spacing: 0;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  background-image: linear-gradient(to bottom,rgba(255,255,255,.09) 0%,rgba(0,0,0,.09) 100%);
  font-size: 1.4rem;
  padding: 22px 30px;
  border-radius: 6px;
  border:none;
}

<div class="container-fluid my_home_banner my_header_bg_color">
    <div class="row">
        <div class="col-md-7">
            <br>
            <br>
            <div class="my_home_banner_left">
                <p class="my_home_banner_title">Stickers Personalizados</p>
                <p class="my_home_banner_subtitle">Easy online ordering, 4 day turnaround and free online proofs. Free
                    shipping.</p>
                <div class="row">
                    <div class="col-md-6">
                        <a href="stickers" class="btn btn-azul text-white btn-block">Comprar</a>
                    </div>
                    <br>
                    <div class="col-md-6">
                        <a href="{% url 'shop:SamplePackPage' %}"
                           class="btn btn-naranja text-white btn-block">Muestras</a>
                    </div>
                </div>
            </div>
            <br>
            <br>
        </div>
        <div class="col-md-5">
            <img class="my_home_banner_image" src="{% static 'img/banner-home.png' %}"
                 width="380px" height="240px">
        </div>
    </div>
</div>

基本上，我将其从-9000更改为9000，看起来似乎相同，并且按钮也可以正常工作。

Answer 2

HTML标记仅在其位置设置为相对或绝对位置时才激活z-index，例如：  -这不起作用：

<div>
   <div style="z-index:1">
   </div>
   <div style="z-index: 2">
   </div>
</div>

• 但这应该可行：

                 

或：

<div>
   <div style="position: absolute;z-index:1">
   </div>
   <div style="position: relative;z-index: 2">
   </div>
</div>

所以根据我所指出的。如果一个标签位于另一个标签内时，您是否想使用z-index对html标签进行排序就没有意义了。

我认为您无法单击按钮的原因是，您将外部标签的z-index设置为-999，这基本上意味着该外部标签的顺序在其他某个标签之下。

因此，请打开检查控制台。并寻找其他与my_header_bg_color顺序相同的标签，以查看是否将z-index设置得更高。或者干脆这样。

<div class="some-other-tag"></div>
<div class="my_header_bg_color" style="position: relative; z-index: 9999">
  <a class="my_home_buttons" />    <---- remove z-index of this tag, its reduncdent
</div>

编辑：只需检查代码笔，就可以通过如下修改使其起作用：

.my_header_bg_color {
  background-color: #00A388;
  position: relative; <---- add position: relative;
  z-index: 9000;
}