位置を変更すると幅の変更が停止する

Question

私のCSSコードに問題があります。私が絶対位置に変更すると、ボタンの幅が変わります。もちろん、私はたくさんのグーグルで検索して、いくつかの記事を見つけましたが、どれも私のために働いていません。

私がしたいこと：
私は自分のアプリケーションの背景（全身の背景）を変更したいと思っています。それが最初の問題です。 Zインデックスを使用するには、位置を設定する必要があります。身体の中の要素は、身体自体よりも高いz-インデックスを持つことはできません（または、私は何か間違ったことをしていますか？）。

しかし、とにかく私が見つけたすべての記事は、親要素の位置を相対座標に変更する必要があると言っています - > bodyタグを使用すると親要素はなく、子div内の親divから相対アニメーションはもう動作しません。

この問題を解決するために何か知っていますか？

HTML：

<ion-content [ngClass]="{'background':flase }" padding> 
    <div [ngClass]="{'containerDiv':true, 'fade':toFade}"> 
     <p class="question">{{question}}</p> 
     <div *ngFor="let choice of choices"> 
      <button #thisElement [ngClass]="{'showAsTrue':(showResult && thisElement.value==choices[answer]?true:false), 'choice':true, 'buttonInBackground':buttonInBackground}" (click)="onClick(thisElement)">{{choice}}</button> 
     </div> 
    </div> 
    <button *ngIf="buttonInBackground" [ngClass]="{'goOnButton':true}" (click)="nextChoice()">Weiter</button> 
</ion-content> 

関連するCSS：

.fade { 
position: absolute; 
top: 0px; 
left: 0px; 
z-index: 1; 
animation: toFade 2s 1; 
animation-delay: 2.5s; 
animation-fill-mode: forwards; 
} 

.goOnButton { 
    background-color: green; 
    width: 50%; 
    color: white; 
    font-size: 17pt; 
    font-weight: bold; 
    border-radius: 4pt; 
    padding-top: 3%; 
    padding-bottom: 3%; 
    z-index: 2; 
    animation: showButton 6.5s 1; 
    animation-fill-mode: forwards; 
    position: fixed; 
    top: 70%; 
    left: 25%; 
    } 
@keyframes toFade { 
from { 
    background: rgb(254, 251, 182) 
} 
to { 
    background: #2e2e2e; 
    opacity: 0.5; 
} 
} 

情報： イオン含有量は体のようなものです。 angular2を知らないすべての人：[ngClass]は、名前の後に真偽がある場合にクラスをバインドします。完璧に動作していますが、CSSは完璧ではありません。

Answer 1

あなたのコードには多くのことがありますので、必要でないものはすべて削除し、必要に応じてボディの背景を変更しました。

// src/app.module.ts 
@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>App</h1> 
    <div class="container"> 
     <div class="question"> 
     <p>Do you know how to play gitar?</p> 
     <button>Yes</button> 
     <button>No</button> 
     </div> 
     <button>Next</button> 
    </div> 
    `, 
    styles: [` 
    .container { 
     background-color: #eee; 
    } 
    `] 
}) 
export class App { } 

// style.css 
body { 
    background-color: pink; 
} 

Plunker