html - CSS：图像上的 z-index 使按钮不可点击

问题描述

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

但是，这会使我的按钮无法点击。我尝试对这些按钮使用正索引，但没有结果。

代码笔：

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“中断”幻灯片单击按钮

标签： htmlcss

解决方案

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>

编辑：只需检查codepen，我通过如下修改使其工作：

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

html - CSS：图像上的 z-index 使按钮不可点击

问题描述

解决方案

推荐阅读