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>

一个图标位于另一个图标的前面，与父级div对齐

1 个答案: