Image overlay without position: absolute

Question

Image overlay without position: absolute

Navigation

#1 by (7 votes)

6

I have tried to position two images, this way

The tear is a picture .png

This is the html structure

<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;
                }
            }

but by showing it in other more basic browsers, the tear goes up and does not stay in place

is more or less where the blue dot is, I would like to know how I can overcome the tear without using position: absolute or what I can improve so that this does not happen in very basic browsers

html css

asked by Ernesto Emmanuel Yah Lopez 21.12.2018 в 20:32

source

1 answer

What is try .. finally used for without the catch clause? LINQ query in .NET VISUAL STUDIO

score 7 · Accepted Answer

The property position when set to absolute will be positioned using the properties left , top , right and bottom with relation to your ancestor positioned closer

A positioned element is an element whose computed value of position is relative , absolute , fixed , or sticky . (In other words, anyone except static ).

The static value is the one with all the html elements by default. That means that when you put absolute the element looks up until it reaches the% tag html in the DOM tree which is the first element that has a value of position other than the default value and positions with respect to this element . In your case and as far as I can see, there is no one nearby so it is positioned with respect to the viewport that is the root of the DOM tree. This photo helps you understand it better.

Look at a curious detail and that is that the absolute element that is the son of a relative is positioned with respect to this and that may be your solution since a relative element that does not specify any offset will be positioned but it will stay in its place , exactly like a static element. With writing

.ico {
    position: relative;
}

You solve your problem. Keep in mind that this can also alter your layout because I do not know the content of your other classes but that's the solution. Specify a container that is one of the rows of your table so that the images are contained in each row.

The compatibility of this technique can be found here but if you give account until Internet Explorer 4 is able to handle it.