one icon in front of another, aligned to right of parent div - html

Question

I can currently place 2 icons in front of one another, however with position: fixed, I cannot seem to get them justified to the right hand side of my parent div...
I have attempted using right: 0, but this seems to justify with respect to the screen rather than div itself. Is there something I'm missing?
.settings,
.clear {
position: fixed;
// positioning to right?
transition: all .2s cubic-bezier(.4, 0, .2, 1);
}
.hide {
opacity: 0;
transform: rotate(225deg);
}
<!-- Just for material icon purposes -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div class="expandPanel" #panel [ngClass]="{expanded: isExpanded}" style="width: 300px; height: 300px; background: lightgrey;">
<div class="expandButton" (click)="togglePanel()">
<a class="material-icons clear" [ngClass]="{hide: isExpanded}">clear</a>
<a class="material-icons settings" [ngClass]="{hide: !isExpanded}">settings</a>
</div>
</div>

Answer 1

First position fixed property will position the element relative to view port.
So that is not what you are looking for. To align you child element relative to the parent element first give your parent position relative property and your child a position absolute property. I think this is what you want:
.settings,
.clear {
transition: all .2s cubic-bezier(.4, 0, .2, 1);
-webkit-transition: all .2s cubic-bezier(.4, 0, .2, 1);
-moz-transition: all .2s cubic-bezier(.4, 0, .2, 1);
-ms-transition: all .2s cubic-bezier(.4, 0, .2, 1);
}
.hide {
opacity: 0;
transform: rotate(225deg);
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
}
.expandPanel {
position:relative;
}
.expandButton {
position:absolute;
right:0;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div class="expandPanel" #panel [ngClass]="{expanded: isExpanded}" style="width: 300px; height: 300px; background: lightgrey;">
<div class="expandButton" (click)="togglePanel()">
<a class="material-icons clear" [ngClass]="{hide: isExpanded}">clear</a>
<a class="material-icons settings" [ngClass]="{hide: !isExpanded}">settings</a>
</div>
</div>