How to hover an absolute element within a relative one? - css

Question

I've got an icon 'X' that shows in corner of button when button is hovered. Problem is I can't click on it for some reason, like element doesnt even exist. Here is html:
<button *ngIf="favapps.indexOf('qualitydocs') >= 0" (mouseover)="showQualitydocs = true" (mouseleave)="showQualitydocs = false" class="btn btn-sq btn-primary text-center"
[routerLink]="['/dokumenti-kvalitete']">
<i class="fa fa-file-text-o inside fa-2x" aria-hidden="true"></i>
<br>Dokumenti
<br> kvalitete
<span class="relative-qualitydocs"><span class="absolute-qualitydocs" *ngIf="showQualitydocs" (mouseover)="showQualitydocs = true" (mouseleave)="showQualitydocs = false"><i class="fa fa-close"></i></span></span>
</button>
and css:
.absolute-qualitydocs {
z-index: 100;
position: absolute;
top: 22px;
background: #fff;
border: 1px solid #67809F;
padding: 0 3px;
cursor: pointer;
color: #67809F;
&:hover {
background-color: #d1d1d1;
}
}
.relative-qualitydocs {
position: relative;
cursor: pointer;
left: -67px;
top: -67px
}
As you can see on the picture it shows correctly, but I cant click on it, I cant hover it, even cursor: pointer doesn't work. Any ideas what might be wrong? Tried putting z-index and display: block, didn't help.
Screenshot:

Answer 1

Try this HTML and CSS
.delete-hover {
z-index: 100;
background: #fff;
border: 1px solid #67809F;
padding: 0 3px;
cursor: pointer;
color: #67809F;
}
.delete-hover:hover {
background-color: #d1d1d1;
}
.relative-qualitydocs {
position: relative;
cursor: pointer;
}
.absolute-qualitydocs {
position: absolute;
top: 0;
left: -18px;
}
<button class="btn btn-sq btn-primary text-center relative-qualitydocs">
<i class="fa fa-file-text-o inside fa-2x" aria-hidden="true"></i>
<br>Dokumenti
<br> kvalitete
<span class="delete-hover absolute-qualitydocs" *ngIf="showQualitydocs" (mouseover)="showQualitydocs = true" (mouseleave)="showQualitydocs = false">×</span>
</button>

Answer 2

Fixed it by putting 'span' ('div' also works) as a parent element instead of 'button' ... if anyone has a clue why this happens, please share cause i have no clue... here is working pen
<button class="parent-relative"> <!-- doesnt work -->
<span class="child-absolute"></span>
</button>
<span class="parent-relative"> <!-- works -->
<span class="child-absolute"></span>
</span>
css:
.parent-relative {
position:relative;
padding: 200px;
background: red;
margin:50px;
}
.child-absolute {
position:absolute;
padding:20px;
background:yellow;
cursor:pointer;
top: 0;
left:-40px;
}