primeng/resources/components/overlay/overlay.css

[](https://badge.fury.io/js/primeng) [](https://www.npmjs.com/package/primeng) [![Actions CI](https://github.com/primefaces/primeng/workflows/No

@layer primeng {
    .p-overlay {
        position: absolute;
        top: 0;
        left: 0;
    }

    .p-overlay-modal {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .p-overlay-content {
        transform-origin: inherit;
    }

    .p-overlay-modal > .p-overlay-content {
        z-index: 1;
        width: 90%;
    }

    /* Position */
    /* top */
    .p-overlay-top {
        align-items: flex-start;
    }
    .p-overlay-top-start {
        align-items: flex-start;
        justify-content: flex-start;
    }
    .p-overlay-top-end {
        align-items: flex-start;
        justify-content: flex-end;
    }

    /* bottom */
    .p-overlay-bottom {
        align-items: flex-end;
    }
    .p-overlay-bottom-start {
        align-items: flex-end;
        justify-content: flex-start;
    }
    .p-overlay-bottom-end {
        align-items: flex-end;
        justify-content: flex-end;
    }

    /* left */
    .p-overlay-left {
        justify-content: flex-start;
    }
    .p-overlay-left-start {
        justify-content: flex-start;
        align-items: flex-start;
    }
    .p-overlay-left-end {
        justify-content: flex-start;
        align-items: flex-end;
    }

    /* right */
    .p-overlay-right {
        justify-content: flex-end;
    }
    .p-overlay-right-start {
        justify-content: flex-end;
        align-items: flex-start;
    }
    .p-overlay-right-end {
        justify-content: flex-end;
        align-items: flex-end;
    }
}