Am trying to get 4 boxes on top of a fading image and the 4 boxes should be in a line.
so the code inside the html has

    <div class="hero-fade">
    </div>
    
    <div class="products">  
        <div class="fashion"></div>
        <div class="gaming"></div>
        <div class="pc"></div>
        <div class="space"></div>
    </div> 

in the css file, I have written

.hero-fade{
    background-color: #d4ebf9;
    height: 200px;
    width: 100%;
    -webkit-mask-image: linear-gradient(black, rgba(0,0,0,0));
    mask-image: linear-gradient(black, rgba(0,0,0,0));
}

.products{
    display: flex;
    margin-left: 1.5%;
    margin-right: 1.5%;
}

.gaming{
    background-color: blue;
    width: 350px;
    height: 420px;
    position: absolute;
    top: 445px;
}

.fashion{
    background-color: blue;
    width: 350px;
    height: 420px;
    position: absolute;
    top: 445px;
    
}

.pc{
    background-color: blue;
    width: 350px;
    height: 420px;
    position: absolute;
    top: 445px;
  
}

.space{
    background-color: blue;
    width: 350px;
    height: 420px;
    position: absolute;
    top: 445px;
    
}

but display: flex; doesn’t works and all my 4 elements are just on top of each other for now,

have tried removing position: absolute;, then it works but my elements come down from the fading image, what’s the solution to this?