javascript - 当我改变位置时停止改变宽度

Question

我的 CSS 代码有问题。如果我将位置更改为绝对位置，按钮的宽度会发生变化。当然，我在谷歌上搜索了很多，找到了一些关于它的文章，但没有一篇对我有用。

我想做的事:
我想更改我的应用程序的背景(全身背景)，它应该像所有其他元素之上的层一样工作。这是第一个问题。为了使用 z-index 必须设置一个位置。我无法设置主体本身的背景，因为这样主体内的任何元素都不能具有比主体本身更高的 z-index(或者我做错了什么但行得通吗？)。

但无论如何:我找到的所有文章都说，我必须将父元素的位置更改为相对位置 --> 如果我使用 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;
}
}

信息: ion-content 就像 body 一样。 对于所有不了解 angular2 的人:[ngClass] 在名称后面的 bool 值为真时绑定(bind)一个类。它运行完美，只是 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