Add div image over a form div - html

Question

I have this basic form
<div class="card mb-5 card-central-responsive" style="min-height: 579px;">
<div class="card-body">
<form #apkCreationForm="ngForm" class="mt-2" novalidate (ngSubmit)="onSubmitApk()">
<div role="alert" class="mb-& ng-star-inserted" style="padding-bottom: .10rem" ng-reflect-ng-class="">
<h4 class="alert-heading">{{ 'apk.product-description' | translate }}</h4>
</div>
<div class="row">
<div class="col-6">
<label class="form-group has-float-label">
<input class="form-control" required ngModel #name="ngModel" name="name" [(ngModel)]="apkName"/>
<span>{{ 'apk.name' | translate }}</span>
<div *ngIf="!name.valid && apkCreationForm.submitted" class="invalid-tooltip">{{ 'apk.name-required' | translate }}!</div>
</label>
</div>
<div class="col-6">
<label class="form-group has-float-label">
<ng-select
[items]="isFree"
bindLabel="id"
name="isFree"
bindValue="id"
[(ngModel)]="isFreeSelected">
</ng-select>
<span>{{ 'apk.is-free' | translate }}</span>
<div *ngIf="!isFreeSelected && apkCreationForm.submitted" class="invalid-tooltip">{{ 'apk.isfree-required' | translate }}</div>
</label>
</div>
</div>
</div>
</form >
</div>
</div>
I have to add a div image on top of this form to have something like this:
I tried many solutions without success. Please how could I achieve this ?
I use ng-bootstrap in my app
Thanks in advance

Answer 1

By applying Position absolute, you can align any object. I just wanted to show you the procedure you're going to do in a simple way.
body {
background-color: #121723;
}
.container {
margin-top: 200px;
}
.form-container {
background-color: #252A39;
color: #f1f1f1;
height: 30rem;
position: relative;
padding-top: 40px;
}
.image-container {
position: absolute;
top: -30%;
left: 5%;
width: 15rem;
height: 15rem;
background-color: #2E3446;
padding: 15px;
border-radius: 3px;
}
.bordered-div {
width: 100%;
height: 100%;
border: 3px dashed #121723;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="form-container">
<!-- image-container -->
<div class="image-container">
<div class="bordered-div">
</div>
</div>
<!-- image-container end -->
<div class="row no-gutters form-tab">
<div class="col-md-2 offset-md-3">
<h6 class="text-capitalize text-right">product details</h6>
</div>
<div class="col-md-2">
<h6 class="text-capitalize text-right">graphic assets</h6>
</div>
<div class="col-md-2">
<h6 class="text-capitalize text-right">categorization</h6>
</div>
</div>
<div class="form-input">
<!-- İnputs -->
</div>
</div>
</div>

Answer 2

You could use about div's in css
position: absolute;
left: %10;
top: %10;
But when on the different pixels measurement, you should something css diversity.