대화상자의 플로팅 버튼이 계속 겹쳐집니다.

Question

안녕하세요. 저는 Maui blazor 앱을 만들고 있는데 플로팅 버튼이 있는 전체 페이지 크기 대화상자가 있습니다. 대화 상자가 닫히고 원본 페이지로 돌아가면 원본 페이지에서 대화 상자 버튼이 있는 위치에 데드 스페이스가 있습니다(대화 상자에서는 조건에 따라 버튼의 가시성을 변경합니다). 플로팅 버튼에 사용한 스타일:

으아악

업데이트: 플로팅 버튼의 CSS를 수정했는데 이제 데드 스페이스는 없지만 위치가 좋지 않습니다.

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

Answer 1

요소 표시 여부를 설정하는 방법에는 두 가지가 있습니다.

한 가지 방법은 visibility 设置为 hidden를 추가하는 것입니다. 그러면 HTML 요소가 숨겨지지만 해당 요소가 차지한 공간은 유지됩니다.

또 다른 방법은 display 设置为 none을 추가하는 것입니다. 이 경우 HTML 요소는 숨겨지지만 해당 요소가 있는 공간은 유지되지 않습니다.

그래서 display并将其值设置为none를 사용해 볼 수 있습니다.