6

He intentado sobre posicionar dos imágenes, de ésta forma

introducir la descripción de la imagen aquí

La lagrima es una imagen .png

Esta es la estructura html

<div class="intertTa">
    <div class="ta borderes ico">
        <img src="...">
        <img class="bad" src="/content/img/asesores/lagrima-asesor.png">
    </div>
    <div class="ta name"><span>Leonidas Segura</span></div>
    <div class="ta sale"><span>1,100</span><small>Ventas</small></div>
    <div class="ta price">
        <div><span>34,000</span><small>mxn</small></div>
        <div class="porcentajev">
            <div class="hakogreenini">
                <div class="item">1</div>
                <div class="itemTotal">47,450 <small>mxn</small></div>
            </div>
        </div>
    </div>
</div>

LESS

.ico {
                width: 104px;
                height: 104px;


                img {
                    width: 104px;
                    height: 104px;
                    z-index: 0;
                }
                /*.rules {
                    margin: auto;
                    position: absolute;
                    z-index: 2;
                    width: 104px;
                    height: 104px;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                }*/
                .bad {
                    position: absolute;
                    z-index: 1;
                    width: 22px;
                    height: 25px;
                    bottom: 29px;
                    left: 100px;
                }
            }

pero al mostrarlo en otros navegadores más básicos, la lagrima se va para arriba y no se queda en su lugar

introducir la descripción de la imagen aquí

se pone mas o menos donde está el punto azul, quisiera saber de que forma puedo sobreponer la lagrima sin usar position: absolute o que puedo mejorar para que no suceda eso en navegadores muy básicos

1
  • .ta.borderes.ico{position:relative} y habrá que cambiar también lo de left: 100px; a algo más pequeño ya que tu imagen tiene width: 104px.
    – enxaneta
    Commented el 21 dic. 2018 a las 19:51

1 respuesta 1

7

La propiedad position cuando se establece en absolute se posicionará usando las propiedades left, top, right y bottom con relación a su ancestro posicionado mas cercano

Un elemento posicionado es un elemento cuyo valor computado de position es relative, absolute, fixed, o sticky. (En otras palabras, cualquiera excepto static).

El valor static es el que tienen por defecto todos los elementos html. Eso significa que cuando pones absolute el elemento busca hacia arriba hasta llegar a la etiqueta html en el árbol del DOM cual es el primer elemento que tenga un valor de position distinto al valor por defecto y se posiciona con respecto a este elemento. En tu caso y hasta donde puedo ver no hay ninguno cercano por lo que se posiciona con respecto al viewport que es la raíz del árbol DOM. Esta foto te sirve para entenderlo mejor.

jerarquia de elementos posicionados

Fíjate en un detalle curioso y es que el elemento absoluto que es hijo de uno relativo se posiciona con respecto a este y esa puede ser tu solución ya que un elemento relativo que no se le especifique ningún offset será posicionado pero se quedará en su lugar, exactamente igual a un elemento estático. Con escribir

.ico {
    position: relative;
}

resuelves tu problema. Ten en cuenta que esto también puede alterar tu layout pues no conozco el contenido de tus otras clases pero por ahí va la solución. Especificar un contenedor que sea una de las filas de tu tabla para que las imágenes queden contenidas a cada fila.

La compatibilidad de esta técnica la puedes consultar aquí pero si te das cuenta hasta Internet Explorer 4 es capaz de manejarla.

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.