Superimpose one <div> to the other keeping them aligned to a third <div>

Asked

Viewed 58 times

-3

Hello I have a problem to align overlay two images. There are two images A and B, and B should be on top of A and both aligned at the bottom of another div that is in the center of the page. I’ll leave you an example so you don’t get confused. [! [Model][1]][1] [1]: https://i.stack.Imgur.com/Kgwq3.png I’ve tried everything, but I can’t align the images at all, my biggest problem is a lot of div inside another, I even tried to swap by table, but the result was the same. The closest I got was the model below, being that in position the only one that left an image superimposed on the other was Absolute, however it is aligned by the page and not by the external div, which is what I need, I even tried to put another div containing just the images just to try to align and I don’t even know if it gets worse or helps.

@charset "utf-8";
    div#A{
      position:absolute;
      width:auto;
    }
    div#B{
      position:relative;
      bottom:0px;
      vertical-align: middle;
      width:auto;
    }
    div#Tela{
        align-items: center;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 60%;
        height:auto;
        text-align:center;
    }
    .Btn{
        position:static;
        width:100%;
        height:auto;
    }
    .Botao{
        width:100%;
        text-align: left;
        background:#09F;
        font-size: 18px;
        font-family:"Arial Black", Gadget, sans-serif;
    }
    
<!Doctype HTML>
<html lang = "pt-br">
<meta charset "UTF-8">
<head>
<title>Doc</title>
</head>
<body>
<center>
<div id="Tela">
    <div>
        <div id="A"><img id="imgA" src=""></div>
        <div id="B"><img id="imgB" src=""></div>
    </div>
    <div class="Btn">
        <button type="button" id="btn" onclick="btn()" class="Botao"></button>
    </div>
</div>
</center>
</body>
</html>

Thanks for your attention, I’ve been trying to fix this for months, but nothing helps.

html css image div positioning

1 answer

0


Take a look here if that’s about what you need.

https://jsfiddle.net/y1ng07oz/

Basically, you need to create a container (called content in the example), this container needs to be relative, by doing so, the item within that container that has the position absolute, will rule on the parent element relative to position.

But absolute contents do not have an 'easy' way of positioning as we found with the flex layout, so it is necessary to make a small calculation in the horizontal position, as for example left: calc(50% - "tamanho da div/2");

Browser other questions tagged html css image div positioning

You are not signed in. Login or sign up in order to post.