Removing space created inside my container [duplicate] - html

Question

This question already has answers here:
How to overlay images
(11 answers)
Closed 3 years ago.
I have a container that has an image and on top of that image a button, but inside the container some "extra" space was created, at the right. I need to remove this extra space because its taking too much space. 3 horizontal images are aligned at the center, all while using a flex display. Using bootstrap.
There are no sizes in width or height, it is only the image behind this button.
<br>
<h1 class="text-center">¿Qué temas te interesan?</h1>
<div class="row justify-content-around">
<div class="d-flex align-content-center flex-wrap container-img-intereses">
<br> <img src="/btn-desarrollo-ing.png" width="350px"/>
<button type="button" class="btn btn-primary" id="wrapper-button">Carreras</button>
</div>
<div class="d-flex align-content-center flex-wrap">
<a href="#"> <br>
<img src="/btn-diseno-ux.png" width="350px"/></a>
</div>
<div class="d-flex align-content-center flex-wrap">
<a href="#"><br>
<img src="/btn-mkt.png" width="350px"/></a>
</div>
</div>
<div class="row justify-content-around">
<div class="d-flex align-content-center flex-wrap">
<a href="#"> <br>
<img src="/btn-negocios.png" width="350px"/></a>
</div>
<div class="d-flex align-content-center flex-wrap">
<a href="#"> <br>
<img src="/btn-comunidad.png"width="350px"/></a>
</div>
<div class="d-flex align-content-center flex-wrap">
<a href="#"> <br>
<img src="/btn-produccion-aud.png"width="350px"/></a>
</div>
</div>
<br>
<div class="d-flex justify-content-center flex-wrap">
<img src="/btn-crecimiento-prof.png"width="350px"/>
</div>
.container-img-intereses {
border: 1px solid black;
display: inline-flex;
align-items: center;
text-align: center;
}
.container-img-intereses > img {
position: absolute;
z-index: -1;
}
.btn {
right: 80px;
top: 40px;
position: relative;
z-index: 1;
}
https://imgur.com/a/JEo68bF i have to repeat this and make it into a process so a button is always on top of these rectangles.

Answer 1

Actually if you need to show the button up the image you are using position relative to button. So button will be take it's width.
Position relative: If you set to position relative, elements take up the same amount of space at the same exact position it was supposed to take as if its position was static.It can however, appear to be pushed to a different location visually. So that's why it's taking sapce around the image.
Position absolute: Position absolute takes the document out of the document flow. This means that it no longer takes up any space like what static and relative does.
So You need to add position absolute on button and position relative to it's container container-img-intereses

Answer 2

Not sure this works for you since it isn't clear what you want to do with that button. You could give the parent div a position of relative and make the button absolutely positioned with the div, and then adjust your HTML and CSS accordingly, see Snippet:
.container-img-intereses {
display: inline-flex;
align-items: center;
text-align: center;
position: relative;
}
.container-img-intereses>img {
position: absolute;
z-index: -1;
}
.btn {
position: absolute;
left: 50%;
bottom: 0px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />
<h1 class="text-center">¿Qué temas te interesan?</h1>
<div class="row justify-content-around">
<div class="d-flex align-content-center flex-wrap container-img-intereses">
<img src="/btn-desarrollo-ing.png" width="350px" />
<button type="button" class="btn btn-primary" id="wrapper-button">Carreras</button>
</div>
<div class="d-flex align-content-center flex-wrap">
<img src="/btn-diseno-ux.png" width="350px" />
</div>
<div class="d-flex align-content-center flex-wrap">
<img src="/btn-mkt.png" width="350px" />
</div>
</div>
<div class="row justify-content-around">
<div class="d-flex align-content-center flex-wrap">
<img src="/btn-negocios.png" width="350px" />
</div>
<div class="d-flex align-content-center flex-wrap">
<img src="/btn-comunidad.png" width="350px" />
</div>
<div class="d-flex align-content-center flex-wrap">
<img src="/btn-produccion-aud.png" width="350px" />
</div>
</div>
<br>
<div class="d-flex justify-content-center flex-wrap">
<img src="/btn-crecimiento-prof.png" width="350px" />
</div>