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

标签 html css

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

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

代码笔:

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

最佳答案

取自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，它看起来是一样的，并且按钮有效。

关于html - CSS:图像上的 z-index 使按钮不可点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54084433/

上一篇：css - css 中的媒体查询没有响应

下一篇：Javascript onmouseover 和 onmouseout 同时被调用

相关文章：

javascript - HTML 大小对我的 Js 有多重要(对我的页面加载时间更重要)

html - 我怎样才能标记它？

html - UI - 将文本框显示为下拉列表(只是外观)

java - 如何在打印时应用 CSS 样式？

css - 这个 LESS 语法是否无效？如果是，我该如何解决？

javascript - jQuery 找到最近的 ul

html - 没有适用于 'xpathApply' 的方法应用于类 "NULL"的对象

css - 通过直接访问 DOM 来应用 CSS Module 类名

html - Z-index 不适用于 IE 中的 iframe 视频

javascript - 如何使 Canvas 图形响应？

©2024 IT工具网  联系我们