LAYOUT LAB / CANONICAL HTML + CSS

imposter

Place an overlay region over a parent without changing document order.

720px

원문 CSS의 공간 배치를 실행합니다. 색·테두리는 영역 구분용이며, 비어 있던 미디어와 설정 슬롯에는 예시 콘텐츠를 채웠습니다.

실행한 HTML·CSS 코드
<section class="imposter_anchor" aria-label="Draft editor">
    <p>Draft body text stays in normal document flow.</p>
    <section class="imposter" aria-label="Modal placement">
        <dialog open>Unsaved changes confirmation</dialog>
    </section>
</section>

<style>
.imposter_anchor {
    position: relative;
}

.imposter {
    display: grid;
    inset: 0;
    place-items: center;
    position: absolute;
    z-index: 1;
}

</style>
원문 가이드