在另一个前面的一个图标，与父div的右边对齐

Question

我现在可以在彼此面前放置2个图标，但是使用position: fixed，我似乎无法将它们对齐到我父母div的右侧......

我曾尝试使用right: 0，但这似乎证明了屏幕而不是div本身。有什么我想念的吗？

.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

第一个位置固定属性将相对于视口定位元素。所以这不是你想要的。要使子元素相对于父元素对齐，首先要为父位置相对属性和您的子元素提供位置绝对属性。我想这就是你想要的：

.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>