How to overlap one div on another div using HTML and CSS - html

Question

I tried z-index :-1 and position:absolute both didn't worked.
How to fix issue.
Are there any other alternatives for overlapping.
<div *ngIf="allFiltersData.length > 0">
<div style="width: 100%;">
<div id="{{controls.fieldName}}_Text" style="border-style: groove;font-style: 14px;border-radius:3px;height: 100%;word-wrap: break-word;padding-left:10px;padding-top:4px;padding-bottom: 4px;font-size: 14px;color:#333333;vertical-align: middle;" tabindex=0 (click)="showList(controls.fieldDisplayName)" class="accordion">Select {{controls.fieldDisplayName}}</div>
<div name='htmlMultiSelect' style="overflow:auto;border-style: groove;width: 300px;background-color: white; position: absolute;height:auto;max-height: 200px; white-space: nowrap;display: none;" id="{{controls.fieldDisplayName}}">
<div style=" padding-left: 10px;padding-top: 10px;padding-bottom: 20px;">
<input type="checkbox" (click)="selectAllForMultiSelect(controls,$event,tab.name)" style="width: 20px;height: 20px;vertical-align:middle;" id="{{controls.fieldName}}_SelectAll">
<input name="{{controls.fieldName}}" (keypress)="multiSelectSearch($event,tab.name,controls)" id="{{controls.fieldDisplayName}}_{{tab.name}}_Search" style="width: 200px;height: 30px;vertical-align:middle;" type="text">
</div>
<div name="customMultiSelectItems" style="padding-top: 5px;padding-left: 10px;" *ngFor="let val of fetchFilterValues(controls.fieldName,true)">
<input type="checkbox" (click)="setSelectedData(controls.fieldControlType, controls.fieldName, {id:val.value.id,name:val.value.name},controls.dependentFilterName,$event,controls.fieldDisplayName,tab.name)" style="width: 20px;height: 20px;vertical-align:middle;" id="{{val.value.id}}_{{controls.fieldName}}_{{tab.name}}" name={{val.value.name}}_{{controls.fieldName}}_{{tab.name}}>
<label tabindex=0 style="font-size:14px;color: #333333;vertical-align:middle;" for={{val.value.id}}_{{tab.name}}> {{val.value.name}}</label>
</div>
<br>
</div>
</div>
</div>
<div id="OverlapThisSection" style="position:absolute">
<div>
</div>
</div>
I'm using above code.
Div with id OverlapThisSection needs to be overlapped. I had set Div with name htmlMultiSelect to position:absolute
Div with id OverlapThisSection not getting overlapped by another Div above to it.
Update 1:
Currently I'm getting view as below.
Actually I'm using primeng dropdown inside OverlapThisSection div.
<p-dropdown> not getting overlapped by it's top div.
How to fix this issue.

Answer 1

I see this 2 different divs, so you can use position:absolute; and top:20px; to the second div.
#OverlapThisSection {
margin: 10px;
position: absolute;
top: 30px;
background-color: green;
}
<div *ngIf="allFiltersData.length > 0">
<div style="width: 100%; height:50px;">
<div id="{{controls.fieldName}}_Text" style="border-style: groove;font-style: 14px;border-radius:3px;height: 100%;word-wrap: break-word;padding-left:10px;padding-top:4px;padding-bottom: 4px;font-size: 14px;color:#333333;vertical-align: middle;" tabindex=0
(click)="showList(controls.fieldDisplayName)" class="accordion">Select {{controls.fieldDisplayName}}</div>
<div name='htmlMultiSelect' style="overflow:auto;border-style: groove;width: 300px;background-color: white; position: absolute;height:auto;max-height: 200px; white-space: nowrap;display: none;" id="{{controls.fieldDisplayName}}">
<div style=" padding-left: 10px;padding-top: 10px;padding-bottom: 20px;">
<input type="checkbox" (click)="selectAllForMultiSelect(controls,$event,tab.name)" style="width: 20px;height: 20px;vertical-align:middle;" id="{{controls.fieldName}}_SelectAll">
<input name="{{controls.fieldName}}" (keypress)="multiSelectSearch($event,tab.name,controls)" id="{{controls.fieldDisplayName}}_{{tab.name}}_Search" style="width: 200px;height: 30px;vertical-align:middle;" type="text">
</div>
<div name="customMultiSelectItems" style="padding-top: 5px;padding-left: 10px;" *ngFor="let val of fetchFilterValues(controls.fieldName,true)">
<input type="checkbox" (click)="setSelectedData(controls.fieldControlType, controls.fieldName, {id:val.value.id,name:val.value.name},controls.dependentFilterName,$event,controls.fieldDisplayName,tab.name)" style="width: 20px;height: 20px;vertical-align:middle;"
id="{{val.value.id}}_{{controls.fieldName}}_{{tab.name}}" name={{val.value.name}}_{{controls.fieldName}}_{{tab.name}}>
<label tabindex=0 style="font-size:14px;color: #333333;vertical-align:middle;" for={{val.value.id}}_{{tab.name}}> {{val.value.name}}</label>
</div>
<br>
</div>
</div>
</div>
<div id="OverlapThisSection" style="position:absolute">Second div content
<div>
</div>
</div>
Or another simple example, you don't have to use z-index for this:
.first {
height: 100px;
width: 100px;
background-color: red;
}
.second {
margin: 10px;
position: absolute;
top: 10px;
height: 80px;
width: 80px;
background-color: green;
}
<div class="first">
</div>
<div class="second">
</div>