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

时间:2018-09-14 05:49:10

标签: html css

我目前可以将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>

1 个答案:

答案 0 :(得分: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>