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!

[Rafael]

No entendí.

[ArturoGallegos]

Yo tampoco entendí mucho, creo que salio bastante rebuscada la explicación.

aun así viendo tu código rescato esto

Código CSS:

.sale-box2 {
    /*height: 100px;*/
    height: 50%;
    left: 0px;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 0px;
    /*width: 100px;*/
    width: 90%;
    z-index: 9;
}
 

juego de adivinanzas? encuentra tu error :D
vuélvete a plantear tu problema y encuentralo en ese fragmento de codigo.

Creo que mas que la venganza del z-index, es venganza de la falta de conocimiento.... tu problema no radica en que uses height 100% y afecte al boton que mencionas.

es solo que te falta leer la documentacion CSS, aqui te van 2 puntos esenciales que necesitas para que te funcione bien

1.- la posision absoluta toma como referencia el ancestro mas proximo con una posision definida, asi sea por lo menos position:relative
2.- las propiedades height y width al tener porcentajes como valor, requieren que su ancestro tenga un ancho/alto definido, de lo contrario seria el porcentaje de 0 (cero) es decir 100% de 0 = 0 por ende no se vera ni podras seleccionarlo.

nota: los atributos en linea por default no tienen ancho ni altura definidos, debes hacerlos que se comporten como elementos en block

[Rafael]

Yo hago un comentario pero viendo los ejemplos.

No utilices posiciones absolutas, trata de respetar al máximo el flujo normal del html.
La absoluta casi nunca la utilizo.

Revisa si puedes usar flex, y también inline-block.

[mortiprogramador]

Sí, creo que me extendí demasiado.

Para resumir, los resultados de una búsqueda en la base de datos arrojarán resultados que pueden ser de varios tipos, y cada tipo tendrá distinta clase css,
la parte visual ya esta, pero el comportamiento de pulsación falla en ciertos dispositivos.

Y tal vez la venganza es del template como tal, pues es un template
que me paso el cliente y ya venía con muchas reglas predeterminadas,
y como bien apuntan, no tengo el conocimiento completo del asunto porque
me estoy encargando de toda la parte backend, y definitivamente si
necesitaría la mano de un frontend porque por estar en lo mio es poco el tiempo que dispongo para enfocarme en primero, obtener más conocimiento
de manejo de reglas avanzadas css, y segundo, a partir de lo adquirido
modificar lo necesario.

En todo caso, muchas gracias por sus indicaciones, en la medida que
me sea posible iré aplicandolas.