La venganza del z-index

[mortiprogramador]

Saludo
En un post anterior, ArturoGallegos me dió tremenda ayuda
para solventar un comportamiento de un template en smartphones.

Ahora bien, la vista en donde realicé las modificaciones
es la página principal de esta web, pero ahora tomando
como base dicha página, estoy mostrando los resultados
de una búsqueda con este link, con dos variantes.

La primera es que cuando el resultado sea un ahorrador o una marca,
la imagen quede en un marco 'redondo' (aunque a veces se ve ovalado,
teorizo por las características de la imagen que se carga), y eso lo hago con esto en una clase que aplico a la etiqueta <img>.

Código CSS:

.div-search-image
        {
            /*height: 250px;*/
            /*width:     250px;*/
            width:95%;
            margin-left: 2.5%;
            margin-right: 2.5%;
            display:block;
            border:1px solid #f0f0f0;
            background-repeat: no-repeat;
            background-position: 0%;
            border-radius: 50%;
            background-size: 100% auto;
        }
 

Lo segundo es que cuando el resultado es ahorrador o negocio
se mostrará un botón para 'Agregar Aliado' y que cambiará su texto
a medida que los usuarios gestionen las solicitudes, teniendo este css
para el botón como tal:

Código CSS:

.form-search-action
        {
            cursor:pointer;
            float: right;
            /*width: 180px;*/
            /*height: 40px;*/
            height: 100%;
            text-align: center;
            width: 100%;
            top: 0;
            z-index: 10;
        }
 

Y aquí también van a venir los resultados de productos (es decir,
lo que se había arreglado inicialmente en post anterior)

Por eso mismo, tomé la clase inicial (sale-box1) y la copie (sale-box2)
para aplicar una u otra clase en el div que contendrá toda la
información del producto (sale-box1), ahorrador o marca (sale-box2).

Esto porque si bien en los productos no hay problema en que se de clic
(o se pulse en smartphones) en cualquier parte de la publicación ya que
eso lo hace entrar al detalle de la información,
en el caso de los ahorradores o marcas quiero que si pulsan en la imagen o el nombre,
haga lo mismo (entre al detalle) pero si dan clic en el botón (que inicialmente dirá 'Agregar Aliado')
esto haga un consumo vía ajax y realice las operaciones pertinentes,
como por ej cambiar el texto del botón a 'Solicitud Pendiente'
(si la persona no esta logueada en la plataforma, saldrá un alert)

El css de esas clases es este:

Código CSS:

.sale-box1 {
    /*height: 100px;*/
    height: 100%;
    left: 0px;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 0px;
    /*width: 100px;*/
    width: 100%;
    z-index: 9;
}
.sale-box span.before {
    right: 89px;
    background: #CB3D27;
}
.sale-box1 span.on_sale {
    background: #7DB122;
    color: #FFF;
    display: block;
    left: -35px;
    font-size: 1em;
    padding: 5px 0;
    position: relative;
    text-align: center;
    top: 23px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 140px;
    z-index: 2;
    text-transform:uppercase;
    border-bottom: 2px solid #6B9C15;
}
.sale-box2 {
    /*height: 100px;*/
    height: 50%;
    left: 0px;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 0px;
    /*width: 100px;*/
    width: 90%;
    z-index: 9;
}
.sale-box2 span.on_sale {
    background: #7DB122;
    color: #FFF;
    display: block;
    left: -35px;
    font-size: 1em;
    padding: 5px 0;
    position: relative;
    text-align: center;
    top: 23px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 140px;
    z-index: 2;
    text-transform:uppercase;
    border-bottom: 2px solid #6B9C15;
}
 

Y bueno, aquí me vuelve a pasar lo del primer post sobre todo con los
ahorradores y las marcas, es decir, en ciertas resoluciones (sobre todo
las menores a 400) y en orientación vertical no se logra obtener el press del botón. Si se cambia a horizontal, ya funciona.

Y pues teniendo en cuenta lo del z-index combinado con width y height
en el post anterior, eso me hizo pensar en el título de este. ; )

Finalmente, quisiera saber si esta bien implementado, o sería mejor
'fusionar' por ej el css del tag img con el css del div(sale-box2)

Ya me dirán, gracias!