当我改变位置时停止改变宽度答案

【问题标题】：Stop changing width when I change position当我改变位置时停止改变宽度
【发布时间】：2017-08-07 11:43:53
【问题描述】：

我的 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;
}
}

信息：离子含量就像身体。对于所有不知道 angular2 的人： [ngClass] 当名称后面的布尔值为真时绑定一个类。它运行良好，只是 CSS 并不完美。

【问题讨论】：

请编辑您的帖子并添加一些相关代码来解释您的问题。
如果可能的话，还有一个小提琴
您是否尝试使用 css 属性为按钮设置宽度？
我添加了相关代码！
@JjavaEvgen 我给了按钮一个宽度，是的

标签： javascript html css angular animation

【解决方案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

【讨论】：