# z-index:10000 를 대체하는 top layer

> Clean Markdown view of GeekNews topic #7271. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=7271](https://news.hada.io/topic?id=7271)
- GeekNews Markdown: [https://news.hada.io/topic/7271.md](https://news.hada.io/topic/7271.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2022-08-27T09:26:01+09:00
- Updated: 2022-08-27T09:26:01+09:00
- Original source: [developer.chrome.com](https://developer.chrome.com/blog/what-is-the-top-layer/)
- Points: 15
- Comments: 0

## Topic Body

- `<dialog>` 또는 Pop Up API (popup 속성) 이용  
- 브라우저의 document 위에 있으므로 Z-index 나 DOM구조 신경쓸 필요 없음   
- 나타나는 순서대로 스태킹 됨(맨 마지막이 맨 위, 제거후 다시 추가하면 맨위로)  
- 각 엘리먼트별로 ::backdrop 이용해서 뒷면 제어 가능  
- Pop Up API : popup=auto|hint|manual, popuptoggletarget/popupshowtarget/popuphidetarget

## Comments



_No public comments on this page._