CODEWITHSUNDEEP
htmlcss
physicsboy
physicsboy

Reputation: 6326

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

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>

Upvotes: 0

Views: 73

Answers (1)

Surya Neupane
Surya Neupane

Reputation: 994

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>

Upvotes: 1

Related Questions