1

Initially, I had this formatted the way that I wanted. After adding and removing code over the last few hours, I'm unsure of what revision that I made that prevents me from separating the individual images. They're supposed to be side-by-side with about 5em in between.

HTML —

<div class="techStackContainer02">
    <div class="techImg">
       <img class="techImg" src="client image.svg" alt="client">
       <img class="techImg" src="server image.svg" alt="server">
       <img class="techImg" src="database.svg" alt="database">
    </div>

CSS —

.techStackContainer02 {
    display: grid;
    gap: 5em;
    height: 15vh;
    max-width: 100%;
    position: relative;
    width: auto;
}

.techImg {
    height: 180px;
    position: absolute;
    width: 80%;
}

Preview of Issue

I've tried using a few resources online but majority of them just discuss positioning attributes (sticky, absolute, fixed, etc.). Using the relative position for my parent container and absolute for my images has them at least placed in a singular row. Everything is sized properly minus the aforementioned overlapping issues.

thesd5x
  • 15
  • 5

1 Answers1

0

When you specify position: absolute; you have to specify the exact position you want for each element.

In this case, they are naturaly overlapping because their positions are determined by the values of top, right, bottom, and left. since you didn't specify any they are in the exact same position.

You can just remove your position: absolute in your .techImg css class and they will not overlap anymore. Maybe you have to adjust you width to get every images on the same lines.

Here is an example with random images :

.techStackContainer02 {
    display: grid;
    gap: 5em;
    height: 15vh;
    max-width: 100%;
    width: auto;
}

.techImg {
    height: 180px;
    width: auto;
}
<div class="techStackContainer02">
    <div class="techImg"> <!-- problem here -->
       <img class="techImg" src="https://picsum.photos/50" alt="client">
       <img class="techImg" src="https://picsum.photos/50" alt="server">
       <img class="techImg" src="https://picsum.photos/50" alt="database">
    </div>

EDIT : i juste realize the code you posted got 1 additional div with the techImg class aswell. Maybe you have to use another class name if you don't want to have strange effects.

loursk
  • 161
  • 4