Die schwebenden Schaltflächen des Dialogs überlappen sich ständig

Question

Hallo, ich erstelle eine Maui-Blazor-App und habe ein Dialogfeld in ganzer Seitengröße mit einer schwebenden Schaltfläche darin. Wenn das Dialogfeld geschlossen wird und zur Originalseite zurückgekehrt wird, gibt es auf der Originalseite an der Stelle, an der sich die Dialogschaltfläche befindet, einen toten Bereich (im Dialogfeld ändere ich die Sichtbarkeit der Schaltfläche basierend auf einer Bedingung). Der Stil, den ich für den schwebenden Button verwendet habe:

.center {
    bottom: 5%;
    z-index: 999;
    cursor: pointer;
    margin: 0;
    position: fixed;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Update: Ich habe das CSS der schwebenden Schaltfläche geändert und jetzt gibt es keinen Leerraum mehr, aber die Position ist nicht gut:

.center {
    bottom: 5%;
    cursor: pointer;
    margin: 0;
    left:50%;
}

Answer 1

有两种方法可以设置元素是否可见。

一种方法是将 visibility 设置为 hidden。然后 HTML 元素将隐藏，但保留该元素所在的空间。

另一种方法是将 display 设置为 none。在这种情况下，HTML 元素会隐藏但不保留该元素所在的空间。

所以，您可以尝试使用display并将其值设置为none。