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