Question

我的CSS代码有问题。如果我将位置更改为绝对位置，则按钮的宽度会发生变化。当然，我已经google了很多，我发现了一些关于它的文章，但它们都不适合我。

我想做什么：
我想改变我的应用程序的背景（整个身体背景），它应该像所有其他元素上面的层一样工作。这是第一个问题。为了使用z-index必须设置一个位置。我无法设置身体本身的背景，因为身体内部的任何元素都没有比身体本身更高的z指数（或者我做错了什么并且有效？）。

但无论如何：我发现的所有文章都说，我必须将父元素的位置改为亲属 - ＆gt;如果我使用body标签，则没有父元素，如果我将父div的位置设置为relative，则子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]在名称后的布尔值为true时绑定一个类。它工作得很好，只是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

我改变位置时停止改变宽度

1 个答案: